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

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