break-inside

The break-inside CSS property describes how the page, column or region break inside the generated box. If there is no generated box, the property is ignored.

break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

Each possible break point, that is each element boundary, is under the influence of three properties, the break-after value of the previous element, the break-before value of the next element and the break-inside of the containing element.

To define if a break must be done, the following rules are applied:

1. If any of the three concerned values is a forced break value, that is always, left, right, page, column or region, it has precedence. If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).
2. If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, 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 avoid value.

Syntax

Values

auto

Allows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted within the principle box.

avoid-page

Avoid any page break within the principle box.

avoid-column

Avoid any column break within the principle box.

avoid-region

Avoid any region break within the principle box.

Formal syntax

auto | avoid | avoid-page | avoid-column | avoid-region

Specifications

Browser compatibility

[*] WebKit and Blink browsers don't support this property, but some have the non-standard -webkit-column-break-before and -webkit-region-break-before with similar parameters as page-break-before.

[1] Edge also supports the non-standard -webkit-column-break-inside variant.