break-before

Definition

In CSS, the "break-before" property is used to specify whether a page, column, or region break should occur before an element. The property can be set to one of several values, including "always", "auto", "avoid", "left", "right", or "page".

Examples

To force a page break before an h1 element:

h1 {
   break-before: always;
}

To prevent a column break before a table:

table {
   break-before: avoid;
}

To force a left page break before an element with a class of "chapter-title":

.chapter-title {
   break-before: left;
}

To force a right page break before an element with an id of "important":

#important {
   break-before: right;
}

To set a page break before an element with a class of "introduction" only if it is necessary to avoid a widows or orphan.

.introduction {
   break-before: page;
}

Values

Best Practices

• Use auto as the default value: Unless there is a specific reason to force or prevent a page/column/region break, set the break-before property to auto to let the browser decide when to break.
• Be mindful of the layout: When using always or avoid, consider how the page layout will be affected by the break. For example, using always on a heading might create a large white space on the previous page.
• Use left and right for facing pages: If you are designing a document that will be printed as a book or magazine, use left and right to ensure that the pages are facing correctly.
• Be aware of page behavior: page value is useful to avoid widows or orphans, but it can also influence the page break. Take care of the text flow after that.
• Test in different browsers: Different browsers may handle page breaks differently, so be sure to test your layout in multiple browsers to ensure that it looks as intended.
• Be aware of the context: Be aware that the break-before property can only be used in paged media (e.g. printed documents or PDFs) and not in screen media (e.g. web pages displayed on a computer or mobile device)
• Use it with other break properties: To have more control over the pagination and flow, use it in conjunction with the break-after and break-inside properties.

Browser Compatibility

It's worth noting that Internet Explorer doesn't support the break-before property, so if you need to support that browser, you should consider using a polyfill or a different approach to achieve the same result.