Fragmentation

Other topics

Remarks:

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

Syntax:

  • page-break-after: auto | always | avoid | left | right | initial | inherit;
  • page-break-before: auto | always | avoid | left | right | initial | inherit;
  • page-break-inside: auto | avoid | initial | inherit;

Parameters:

ValueDescription
autoDefault. Automatic page breaks
alwaysAlways insert a page break
avoidAvoid page break (if possible)
leftInsert page breaks so that the next page is formatted as a left page
rightInsert page breaks so that the next page is formatted as a right page
initialSets this property to its default value.
inheritInherits this property from its parent element.

Contributors

Topic Id: 4316

Example Ids: 15078

This site is not affiliated with any of the contributors.