Page break before element

break-before

Specify page layout and column layout behaviour immediately before the beginning of this element.

Property values

This property can be used to control the layout of text across either columns or across printed pages, either forcing the layout to begin on the next column/page, or preventing the layout from breaking just before this element.

Use one of these keywords which are honored for both page layout and column layout:

auto Allows the page layout or column layout to insert a break just before this element, but never forces the break.
avoid Prevents the page layout or column layout from inserting a break just before this element.
always When the element is inside a column, the column layout algorithm inserts a column break and the element begins in the next column; but when the element is not inside a column, the page layout algorithm inserts a page break and the element begins on the next page.
all Regardless of whether this element is inside a column, the layout algorithm inserts a page break and the element begins on the next page.

Or use one of these keywords which are specific to page layout only:

avoid-page Prevents the page layout from inserting a page break just before this element
page Forces the page layout to insert a page break just before this element.
left Inserts one or two page breaks just before this element, forcing the element to begin on a left page.
right Inserts one or two page breaks just before this element, forcing the element to begin on a right page.
recto Inserts one or two page breaks just before this element, forcing the element to begin on a recto page, the left-hand page of a two-page spread (in left-to-right reading systems).
verso Inserts one or two page breaks just before this element, forcing the element to begin on a verso page, the right-hand page of a two-page spread (in left-to-right reading systems).

Or use one of these keywords which are specific to column layout only:

avoid-column Prevents the column layout from inserting a column break just before this element.
column Forces the column layout to insert a column break just before this element.

Examples

This example forces a break before every h1 heading, and prevents a break from happening just before the first paragraph of a section.

h1 {
break-before: always;
}
section p:first-of-type {
break-before: avoid;
}
break-before
0

style > paging > break-beforePage break before element

🔗 🔎