レイアウト

break-inside

break-inside は、段組みや印刷のページの切れ目で、要素が途中で分かれてもよいかを指定します。avoid にすると、なるべく分けずに次の段やページへ送ります。

構文

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

The quick brown fox jumps.茶色の狐が犬を飛び越える。Over the lazy dog.

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  column-count: 2;
}

.box > :nth-child(2) {
  break-inside: avoid;
}

break-insideavoid

autoavoidavoid-columnavoid-page

The quick brown fox jumps.茶色の狐が犬を飛び越える。Over the lazy dog.

プレビューでは、2 段組みの箱の中の水色のかたまり（2 番目の子）に書いています。auto では 1 段目の下と 2 段目の上に分かれ、avoid では分かれずに 2 段目の頭から始まります。

段組みに並べたカードや、印刷するときの表や図など、途中で切れると読みにくいものに書きます。

避けるのはできるときだけです。段やページより高い要素は、avoid でも途中で分かれます。
インラインの要素（span や display: inline-block の要素）には効きません。display: block などのブロックの要素に書きます。
古い page-break-inside は、今も break-inside の別名として使えます（値は auto と avoid だけです）。
avoid-region は CSS Regions のための値で、対応しているブラウザが無いので、コントロールには出していません。