Skip to content

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.

css

/* 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 pagesbreak-inside. Works everywhere.How to keep a heading with the text that follows itbreak-after. Works everywhere.page-break-inside vs break-inside: which should I usepage-break-inside. Works everywhere.How to stop single lines being stranded across PDF pagesorphans and widows. Works everywhere.Why borders disappear when an element splits across pagesbox-decoration-break. Works in a browser-based render.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground