レイアウト
break-after
break-after は、段組みや印刷のページで、要素の直後に切れ目を入れるかを指定します。column にすると、その要素の次から次の段が始まります。
構文
auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | regionプレビュー
The fox.茶色の狐が跳ぶ。Over the lazy dog.
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-count: 2;
column-fill: auto;
}
.box > :nth-child(2) {
break-after: column;
}コントロール
break-aftercolumn
The fox.茶色の狐が跳ぶ。Over the lazy dog.
解説
値の意味
auto：初期値です。収まらなくなったときだけ切れ目が入ります。column：直後で必ず段を改めます。avoid：直後では、段もページもなるべく改めないようにします。avoid-column：直後では段をなるべく改めないようにします。page/avoid-page：印刷するときに、直後で必ずページを改めます／なるべく改めないようにします。left/right：印刷するときにページを改め、次が左のページ／右のページになるようにします。そのために白紙のページが 1 枚入ることがあります。recto/verso：本の表のページ／裏のページから始めます。左から右へめくる本では、right/leftと同じです。always：段組みの中なら段を、そうでなければページを改めます。効くのは Firefox で印刷するときだけです。
プレビューでは、2 段組みの箱の中の水色のかたまり（2 番目の子）に書いています。箱には column-fill: auto も書いて、1 段目から順に詰めています。auto ではすべて 1 段目に収まり、column ではかたまりの次の英文が 2 段目の頭から始まります。
よく使う場面
印刷用のスタイルで、表紙や目次の要素に break-after: page を書いて、本文を新しいページから始めるときに使います。
気をつけること
- 段組みの中で
column・avoid・avoid-columnが効くのは Chrome・Edge だけです。Firefox・Safari では段は改まりません。 - インラインの要素（
spanやdisplay: inline-blockの要素）には効きません。display: blockなどのブロックの要素に書きます。 - この要素の
break-afterと、次の要素のbreak-beforeは同じ切れ目にかかります。片方がcolumnやpageのように切れ目を入れる値なら、もう片方がavoidでも切れ目が入ります。 - 古い
page-break-afterは、今もbreak-afterの別名として使えます（alwaysはpageと同じ意味になります）。 all・region・avoid-regionは対応しているブラウザが無いので、コントロールには出していません。