Paging

Although we build sites and applications for the Web, sometimes what we make is also printed.

The following properties will help us make our content more presentable and better handled across pages when printed.

Let's check out these paging properties.

page-break-after

The page-break-after CSS property defines where the page breaks after a specific element, and it looks like this:

page-break-after: always;

Description

What this means is that when a new page break is created, a new page will be printed.

It works only on block-level elements. Also, since this property is used for printing, it's common to see it inside an @print media query.

This property supports five keyword values: always, auto, avoid, left, and right.

  • always: This value will force a page break after the element.
  • auto: This is the default value. It creates automatic page breaks.
  • avoid: This will not allow any page breaks after the element, if possible.
  • left: This will force one or two page breaks after the element in order to make the following page a left-side page.
  • right: This will force one or two page breaks after the element in order to make the following page a right-side page.

CSS:

@media print {
  .element {
    page-break-after: always;
  }
}

page-break-before

The page-break-before CSS property works similar to the page-break-after CSS property. However, it defines where the page breaks before a specific element, and it looks like this:

page-break-before: always;

Description

When a new page break is created, a new page will be printed.

It works only on block-level elements. Also, since this property is used for printing, it's common to see it inside an @print media query.

This property supports the same five keyword values as the page-break-before property: always, auto, avoid, left, and right.

Refer to the page-break-before CSS property section for the description of each keyword value.

CSS:

@media print {
  .element {
    page-break-before: always;
  }
}

page-break-inside

The page-break-inside CSS property also works similar to the page-break-before and page-break-after properties. However, it defines where the page breaks inside a specific element, and it looks like this:

page-break-inside: avoid;

Description

What this means is that when a new page break is created, a new page will be printed.

This property supports only two keyword values, though: auto and avoid.

  • auto: This is the default value. It creates automatic page breaks.
  • avoid: This will not allow any page breaks inside the element, if possible.

CSS:

@media print {
  .element {wdwqd
    page-break-before: avoid;
  }
}
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.15.245.1