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;
}