The break-inside CSS property defines 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: 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:
always, left, right, page, column, or 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-before value has precedence over the break-after value, which in turn has precedence over the break-inside value.avoid, avoid-page, avoid-region, or 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.
| Initial value | auto |
|---|---|
| Applies to | block-level elements |
| Inherited | no |
| Media | paged |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
The break-inside property is specified as one of the keyword values from the list below.
autoavoidavoid-pageavoid-columnavoid-region
auto | avoid | avoid-page | avoid-column | avoid-region
| Specification | Status | Comment |
|---|---|---|
| CSS Fragmentation Module Level 3 The definition of 'break-inside' in that specification. | Candidate Recommendation | No change. |
| CSS Regions Module Level 1 The definition of 'break-inside' in that specification. | Working Draft | Extends the property to handle region breaks. |
| CSS Multi-column Layout Module The definition of 'break-inside' in that specification. | Working Draft | Initial definition. |
| Desktop | ||||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
| Basic support | 50 | 12 | No | 10 | 37
|
10 |
column and avoid-column
|
No | No | No | 10 | 11.1 — 12.1 | No |
recto and verso
|
No | No | No | No | No | No |
region and avoid-region
|
No | No | No | No | No | No |
| Mobile | |||||||
|---|---|---|---|---|---|---|---|
| Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | 50 | 50 | Yes | No | ? | 10 | 5.0 |
column and avoid-column
|
No | ? | No | No | ? | No | No |
recto and verso
|
No | ? | No | No | No | No | No |
region and avoid-region
|
No | ? | No | No | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside