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.
The
page-break-after
CSS property defines where the page breaks after a specific element, and it looks like this:
page-break-after: always;
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; } }
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;
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; } }
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;
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; } }
52.15.245.1