break-before

What the values mean

• auto: the initial value. A break happens only when the content no longer fits.
• column: always starts a new column before the element.
• avoid: avoids both column and page breaks before the element when possible.
• avoid-column: avoids a column break before the element when possible.
• page / avoid-page: when printing, always starts / avoids starting a new page before the element.
• left / right: when printing, starts a new page so that the next one is a left / right page. A blank page may be inserted to get there.
• recto / verso: starts on the front / back side of a leaf. In a book that pages from left to right, these are the same as right / left.
• always: starts a new column inside columns, or a new page otherwise. It only works when printing from Firefox.

The preview sets it on the light blue block (the second child) inside a two-column box. The box also has column-fill: auto, so the first column fills up first. With auto everything fits in the first column. With column the block starts at the top of the second column.

When to use it

It is common in print styles: put break-before: page on chapter headings so that every chapter starts on a new page.

Watch out

• Inside columns, column, avoid, and avoid-column only work in Chrome and Edge. Firefox and Safari do not start a new column.
• It has no effect on inline-level elements (a span, or an element with display: inline-block). Use it on block elements such as display: block.
• The previous element's break-after and this element's break-before apply to the same break point. If either one forces a break, such as column or page, the break happens even if the other is avoid.
• The old page-break-before still works as an alias of break-before (its always means page).
• all, region, and avoid-region are not supported by any browser, so they are left out of the controls.