Page Breaks

There are three CSS properties for controlling page breaks:

  • page-break-before to force or suppress page breaks that occur immediately before an element,
  • page-break-after to force or suppress page breaks that occur immediately after an element,
  • page-break-inside to suppress page breaks that occur inside an element.

These three properties can be applied to block-level elements, table rows and table row groups that occur within an in-flow element (ie. inside the normal flow of the document, not inside a float or an absolutely positioned block).

CSS

chapter { page-break-before: always }

A page break is forced before every chapter element so that new chapters always start at the beginning of a fresh page.

CSS

heading { page-break-after: avoid }

Avoid inserting a page break immediately after a heading element, if possible. If a heading occurs at the bottom of a page, it may be moved to the next page to keep it adjacent to the following content.

CSS

table { page-break-inside: avoid }

Avoid inserting a page break within a table element, if possible. If a table would be split across two pages, it may be moved to the next page to keep it in one piece. (The table may still need to be split if it is longer than one whole page).