break-after

What the values mean

• auto: the initial value. A break happens only when the content no longer fits.
• column: always starts a new column after the element.
• avoid: avoids both column and page breaks after the element when possible.
• avoid-column: avoids a column break after the element when possible.
• page / avoid-page: when printing, always starts / avoids starting a new page after 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 English sentence after the block starts at the top of the second column.

When to use it

Use it in print styles, for example break-after: page on a cover or a table of contents so that the main text 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.
• This element's break-after and the next 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-after still works as an alias of break-after (its always means page).
• all, region, and avoid-region are not supported by any browser, so they are left out of the controls.