The page-break-before
property is used to specify whether or not a page break should occur before 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.
The page-break-before
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 before an h1
element. The heading and any content that comes after it would then be printed on the next page, such as a heading of a new chapter in a book, for example, which usually starts in a new page. You rarely ever see a chapter start in the middle or end of a page.
In the following example, we’re using the @media
rule to specify page break styles for printed documents. We’ll select all h1
headings and tell the user agent to break the pages before the headings at all times.
@media print { h1 { page-break-before: always; } }
Another use case for page-break-before
is to break pages before comment threads. It is preferable to print comment threads on a new page and not have them start in the middle or end of the previous page which could normally contain the ending part of an article, for example.
The page-break-before
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-before
property. This new property also handles column and region breaks while being syntactically compatible with page-break-before
. Thus before using page-break-before
, check if you can use break-before
instead.
Official Syntax
-
Syntax:
page-break-before: 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 before the element that
page-break-before
is applied to. - always
- Always force a page break before the element.
- avoid
- Avoid a page break before the element.
- left
- Force one or two page breaks before the element so that the next page is formatted as a left page. That is, the element should start on a left page. So, if the page is formatted as a right page, the page is broken and 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 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 element on the next left page.
- right
- Force one or two page breaks before the element so that the next page is formatted as a right page. That is, the element should start on a right page. So, if the page is formatted as a left page, the page is broken and 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 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 element on the next right page.
Examples
The following example causes pages to break before a comment thread with an ID comments
:
@media print { #comments { page-break-before: always; } }
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
- 108
- 65
- 10
- 94
- 3.1
Mobile / Tablet
- 3.2
- 129
- all
- 129
- 130