CSS - break-before

概要

属性名	break-before
値	auto \| always \| avoid \| left \| right \| page \| column \| avoid-page \| avoid-column
初期値	auto
適用可能要素	ブロックレベル要素
継承	継承しない
メディア	paged
アニメーション	不可

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	10	未	未	10.1-12.1	未

page-break-before を拡張する属性として CSS3 で追加定義されました。印刷時の改ページに加え、columns によるマルチカラムにおける改カラムを制御します。

値	説明
auto	改ページ/改カラムをブラウザの判断に任せます。
always	常に改ページします。
page	常に改ページします。(always と同じ)
column	常に改カラムします。
avoid	改ページ/改カラムを禁止します。
avoid-page	改ページを禁止します。
avoid-column	改カラムを禁止します。
left	次ページが左ページになるようにひとつまたは二つ改ページします。
right	次ページが右ページになるようにひとつまたは二つ改ページします。

例えば下記の例で、段落2 に対して break-before: always を指定すると、右図のように段落2 の前で改ページされるようになります。

Page.1		Page.2		Page.1		Page.2
段落１：あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ段落２：ああああああああああああああああああああああああああああああああああ		ああああああああああああああああああああああああ段落３：あああああああああああああああああああああああああああああああああああああああああああ	⇒	段落１：あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ		段落２：ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ段落３：あああああああああああああああああああああああああああああああああああああああああああ

例えば下記の例で、段落2 に対して break-before: column を指定すると、右図のように段落2 の前で改カラムされるようになります。

段落１：あああ

ああああああああ

段落２：あああ

ああああああああ

段落３：あああ

ああああああああ

⇒

段落１：あああ

ああああああああ

段落２：あああ

ああああああああ

段落３：あああ

ああああああああ

CSS

.multicol {
  column-count: 3;
}
.multicol p {
  break-before: column;
}

HTML

<div class="multicol">
  <p>段落1：あああああああ・・・</p>
  <p>段落2：あああああああ・・・</p>
  <p>段落3：あああああああ・・・</p>
</div>

初版：2015年10月25日、最終更新：2016年5月8日

https://www.tohoho-web.com/css/prop/break-before.htm