1. css
  2. /properties
  3. /page-break-before

page-break-before

Definition

The page-break-before property is a CSS property that allows you to specify whether a page break should occur before an element. This property is used to control how content is paginated when it is printed or displayed across multiple pages. You can use this property to ensure that specific elements start on a new page, to avoid orphaned content, or to prevent content from being split across multiple pages.

Examples

Force a page break before a specific element:

.print-break {
  page-break-before: always;
}

Prevent a page break before an element:

.no-print-break {
  page-break-before: avoid;
}

Control where a page break should occur based on page type:

@media print {
  .page-break {
    page-break-before: always;
  }
  .page-break-avoid {
    page-break-before: avoid;
  }
}

Values

ValueDescription
autoThe default value. A page break may or may not occur before the element, depending on the surrounding content and available space.
alwaysA page break should occur before the element.
avoidA page break should not occur before the element.
leftA page break should occur before the element, and the element should start on a left-hand page if possible.
rightA page break should occur before the element, and the element should start on a right-hand page if possible.

Best Practices

  • Use this property sparingly, as it can interfere with the flow of content and make your page layout less predictable.
  • Be mindful of how this property affects the readability and usability of your content. In general, you should avoid breaking up paragraphs or other cohesive blocks of content across multiple pages.
  • Test your content on different devices and in different browsers to ensure that it prints correctly and looks good across a variety of contexts.
  • Avoid using this property to force content to fit onto a specific number of pages, as this can result in awkward and inconsistent page layouts.
  • Consider using other pagination properties, such as page-break-inside, to fine-tune the way your content is paginated.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes