break-insideプロパティ

値

次の値を指定することができます。「改ページ」は印刷時に適用されます。
2016年9月時点では、Firefoxは対応していません。

• auto - 改ページや段の区切りを指定しない。初期値。
• avoid - 改ページや段の区切りを行わないようにする。
• avoid-page - 改ページをしないようにする。
• avoid-column - 段の区切りをしないようにする。

使用例

値に「avoid」を指定している例です。
指定したsection要素内では改ページ、段の区切りが発生しなくなります。

CSS コード例

section {
  column-count: 3;
}
.box1 {
  break-inside: avoid;
}

HTML コード例

<section class="box1">
  <h2>タイトル1</h2>
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。</p>
  <h2>タイトル2</h2>
  <p>ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。</p>
</section>