Where pages break / break-before
How to force a page break before an element in a PDF
break-before: page starts a new page before this element, whatever is left of the current one.
What it is for
Sections that have to start fresh: an appendix, each chapter, each employee's payslip in a batched run. It is also how you split one long document into logical units without generating several files.
Support: Works everywhere
The page value works everywhere. left and right, which force a break to the next left or right page, are honoured by print engines and inconsistently by browser engines.
The syntax
Written the way it would appear in a document stylesheet, using break-before as intended.
/* Each of these starts a page. */
.chapter,
.appendix {
break-before: page;
}
/* Every payslip in a batch, except the first, which would leave a blank page. */
.payslip + .payslip {
break-before: page;
}The mistake people make
Putting it on the first element too, which asks for a page break before anything has been laid out and produces a blank first page. The adjacent sibling selector above avoids that.
Frequently asked
Does break-before work when generating a PDF?
Works everywhere. The page value works everywhere. left and right, which force a break to the next left or right page, are honoured by print engines and inconsistently by browser engines.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to stop an element splitting across PDF pages
break-inside. Works everywhere.
How to keep a heading with the text that follows it
break-after. Works everywhere.
page-break-inside vs break-inside: which should I use
page-break-inside. Works everywhere.
How to stop single lines being stranded across PDF pages
orphans and widows. Works everywhere.
Why borders disappear when an element splits across pages
box-decoration-break. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.