CSS Reference Property

page-break-after

The page-break-after property is used to specify whether or not a page break should occur after the element it is applied to.

Page breaks are applied to paged media, such as printed books or documents. When a page is broken, the layout ends in the current page and the remaining elements of the document are laid out in a new page. You can see this in PDF documents, where some pages have a lot of white space left, and content continues on the next page. If no page break rules are specified, the page may break inside pieces of content such as text, lists, code snippets, images, etc.

break-pages
Image showing a page break with a paragraph of text spanning across two pages.

The page-break-after property also specifies on what page (left or right) the subsequent content should resume.

For example, you can tell the user agent to break a page after certain elements like chapter footnotes or appendices, colophons, tables of content, etc., therefore making sure that any content that comes after them will start in a new page.

page-break-after
In this screenshot taken from the book Designing For Emotion” by Aaron Walter, the page is broken at the end of the table of contents, so some space is left at the bottom, and any content that comes after the table of contents will start in a page after this one.

In the following example, we’re using the @media rule to specify page break styles for printed documents. We’ll select the #table-of-contents element and tell the user agent to break the page after the table of content:

@media print {
    #table-of-content {
        page-break-after: always;
    }
}
                

Using page-break-after, you can cause a page break after the table of contents and tell the user agent to make sure the next page is right or left page. For example, if you want to start the first chapter after the table of contents on a right page (in a left-to-right language), you can do that by using the right value. See the Values and Examples sections below for more information and an example.

The page-break-after property is applied to block-level elements in the normal flow of the root element. User agents may also apply it to other elements, e.g., ‘table-row’ elements.

Trivia & Notes

Page breaks may help avoid or cause orphans and widows in pages.

When a page break splits a box, the box’s margins, borders, and padding have no visual effect where the split occurs.

This property is in progress of being replaced by the more generic break-after property. This new property also handles column and region breaks while being syntactically compatible with page-break-after. Thus after using page-break-after, check if you can use break-after instead.

Official Syntax

  • Syntax:

    page-break-after: auto | always | avoid | left | right | inherit
  • Initial: auto
  • Applies To: block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
  • Animatable: no

Values

auto
This is the initial value. Neither force nor forbid a page break after the element that page-break-after is applied to.
always
Always force a page break after the element.
avoid
Avoid a page break after the element.
left
Force one or two page breaks after the element so that the next page is formatted as a left page. That is, the content after the element should start on a left page. So, if the page is formatted as a right page, the page is broken and the content that comes after the element continues on the next page which is a left page in double-sided media (think of a book). If the page is a left page and we want the content after the element to start on a left page as well, the user agent should break the current page, then break the next page (which would be a right page), and then print the content on the next left page.
right
Force one or two page breaks after the element so that the next page is formatted as a right page. That is, the content after the element should start on a right page. So, if the page is formatted as a left page, the page is broken and the content that comes after the element continues on the next page which is a right page in double-sided media (think of a book). If the page is a right page and we want the content after the element to start on a right page as well, the user agent should break the current page, then break the next page (which would be a left page), and then print the content on the next right page.

Examples

The following example causes pages to break after a table of contents, but specifies that the content after that should start on a right page:

@media print {
    #table-of-contents {
        page-break-after: right;
    }
}
                

In the same book, Designing For Emotion”, a page break is specified so that the content after the table of contents starts on a right page. It’s not apparent on the digital version since it’s not double-sided, but you can still see how the browser breaks two pages to make sure the content after the table of contents starts on the right page:

page-break-after-right
Image showing an example of page-break-after: right

Browser Support

CSS page-break properties

Properties to control the way elements are broken across (printed) pages.

W3C Recommendation

Supported from the following versions:

Desktop

  • 4
  • 65
  • 10
  • 15
  • 3.1

Mobile / Tablet

  • 3.2
  • 2.1
  • all
  • 122
  • 123

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by . Last updated March 17, 2017 at 1:07 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.