break-inside CSS property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.
/* Keyword values */ break-inside: auto; break-inside: avoid; break-inside: avoid-page; break-inside: avoid-column; break-inside: avoid-region; /* Global values */ break-inside: inherit; break-inside: initial; break-inside: revert; break-inside: revert-layer; break-inside: 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 value of the element that appears the latest in the flow is used. Thus, the
break-beforevalue has precedence over the
break-aftervalue, which in turn 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