page-break-after

Definition

The page-break-after property is a CSS property that specifies whether a page break should occur after an element. This property is often used to control pagination in printed documents or PDFs. When this property is set on an element, the browser inserts a page break after the element when the document is printed or rendered as a PDF.

Examples

Inserting a page break after a heading element:

<h1 class="example-1">Heading</h1>
.example-1 {
  page-break-after: always;
}

Preventing page breaks after a navigation element:

<nav class="example-2">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</nav>
.example-2 {
  page-break-after: avoid;
}

Setting a page break to occur only if the element occurs within a page:

<div class="example-3">This is an example</div>
.example-3 {
  page-break-after: auto;
}
@media print {
  .example-3 {
    page-break-after: always;
  }
}

Values

Best Practices

• Use the page-break-after property to control pagination in printed documents or PDFs.
• Use always or avoid to ensure consistent page breaks, rather than relying on default behavior.
• Use avoid to prevent page breaks within an element, as this can improve the readability of your document.
• Use media queries to apply different page-break-after rules for different devices or print styles.
• Test your print styles on different devices and paper sizes to ensure that the page breaks are applied as expected.

Browser Compatibility

• This property only applies to printed documents or PDFs, and will not have any effect on web page layout.