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".
To force a page break before an h1 element:
To prevent a column break before a table:
To force a left page break before an element with a class of "chapter-title":
To force a right page break before an element with an id of "important":
To set a page break before an element with a class of "introduction" only if it is necessary to avoid a widows or orphan.
|The browser will decide when to break before the element.
|Forces a page/column/region break before the element.
|Prevents a page/column/region break before the element if possible.
|Forces one or two page breaks before the element so that the next page is a left page
|Forces one or two page breaks before the element so that the next page is a right page
|Breaks before the element only if it is necessary to avoid a widows or orphan.
- 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.
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.