Layout
break-inside
break-inside sets whether an element may be split at a column break or a printed page break. With avoid, it is moved to the next column or page instead when possible.
Syntax
auto | avoid | avoid-page | avoid-column | avoid-regionPreview
The quick brown fox jumps.茶色の狐が犬を飛び越える。Over the lazy dog.
Presets
Drag the bottom-right corner to resize
Code
.box {
column-count: 2;
}
.box > :nth-child(2) {
break-inside: avoid;
}Controls
break-insideavoid
The quick brown fox jumps.茶色の狐が犬を飛び越える。Over the lazy dog.
About
What the values mean
auto: the initial value. The element may be split.avoid: avoids splitting at column breaks and page breaks alike.avoid-column: only avoids column breaks.avoid-page: only avoids page breaks when printing. It has no effect on the columns in this preview.
The preview sets it on the light blue block (the second child) inside a two-column box. With auto the block is split between the bottom of the first column and the top of the second; with avoid it stays whole and starts at the top of the second column.
When to use it
Use it on things that are hard to read when cut in two, such as cards laid out in columns, or tables and figures in printed pages.
Watch out
- Breaks are avoided only when possible. An element taller than a column or page is still split, even with
avoid. - It has no effect on inline-level elements (a
span, or an element withdisplay: inline-block). Use it on block elements such asdisplay: block. - The old
page-break-insidestill works as an alias ofbreak-inside(with onlyautoandavoid). avoid-regionis meant for CSS Regions, which no browser supports, so it is left out of the controls.