Fragmentation

There is no page-break property in CSS. Only the 3 properties (page-break-before, page-break-after, page-break-inside).

Related: orphans, widows.

Media print page-break

@media print {
  p {
    page-break-inside: avoid;
  }
  h1 { 
    page-break-before: always;
  }
  h2 {
    page-break-after: avoid;
  }
}

This code does 3 things:

  • it prevents a page break inside any p tags, meaning a paragraph will never be broken in two pages, if possible.
  • it forces a page-break-before in all h1 headings, meaning that before every h1 occurrence, there will be a page break.
  • it prevents page-breaks right after any h2