CSS break-inside Property
Description
The break-inside CSS property is used to control how content within a multi-column layout should be split or broken across columns when it doesn't fit entirely within a single column. This property can be applied to elements within a column container, such as a div or section, and it allows you to specify whether the content should be allowed to break inside the column, keeping portions together, or whether it can break between columns. By setting values like auto, avoid, or avoid-column, web developers can influence the behavior of column breaks to improve the readability and aesthetics of multi-column text or content layouts. This property is particularly useful for creating magazine-style columns or multi-column text layouts on web pages.
- Initial value
- auto
- Applies to
- Block level elements
- Inherited
- Yes
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.breakInside
Syntax
break-inside: auto | avoid | avoid-page | avoid-column
Values
- autoA page/column/region break is determined by the flow of content.
- avoidA page/column/region break is not allowed within the content block.
- avoid-pageA page break is not allowed within the content block.
- avoid-columnA column break is not allowed within the content block.
- avoid-regionA region break is not allowed within the content block.
- inherit
Example
.class {
break-inside: avoid;
}Browser Support
The following table will show you the current browser support for the CSS break-inside property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 50 | 65 | 37 | 10 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 50 | 65 | 37 | 10 | 5 | 50 |
Last updated by CSSPortal on: 31st December 2023