break-before CSS property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.
/* Generic break values */ break-before: auto; break-before: avoid; break-before: always; break-before: all; /* Page break values */ break-before: avoid-page; break-before: page; break-before: left; break-before: right; break-before: recto; break-before: verso; /* Column break values */ break-before: avoid-column; break-before: column; /* Region break values */ break-before: avoid-region; break-before: region; /* Global values */ break-before: inherit; break-before: initial; break-before: revert; break-before: revert-layer; break-before: unset;
Each possible break point (in other words, each element boundary) is affected by three properties: the
break-after value of the previous element, the
break-before value of the next element, and the
break-inside value of the containing element.
To determine if a break must be done, the following rules are applied:
- If any of the three concerned values is a forced break value (
region), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the
break-beforevalue has precedence over the
break-aftervalue, which itself has precedence over the
- If any of the three concerned values is an avoid break value (
avoid-column), no such break will be applied at that point.
Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding