break-before:要素のボックスが開始する前にページやカラムをどのように区切るかを指定する

初期値 auto
適用対象 ブロックレベル要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

break-beforeの説明

break-beforeは、要素のボックスが開始する前にページやカラムをどのように区切るかを指定します。例えば、カラムの途中でページ区切りやカラム区切りが発生する場合に、ボックスの直前に区切りを入れるか、禁止するかを選べます。

これはブロックレベル要素のボックスの振る舞いに影響します。逆にボックスを持たない内容には影響を与えません。ブラウザで閲覧することを前提としたウェブサイトで、印刷で出力する祭のレイアウトや他のアプリケーションで開く場合の見栄えを調整する時に役立つかもしれません。

区切りの発生については、いくつかの特徴があります。

  • 区切りの対象となった要素は、直前に配置された要素のbreak-afterの値、直後に配置された要素のbreak-beforeの値、包含要素のbreak-insideの値から影響を受けます。
  • 区切りの挿入が考慮される場所でalwaysleftrightpagecolumnregionのいずれかの値を持つ要素があれば、その振る舞いが優先されます。
  • 区切りの挿入が考慮される場所でavoidavoid-pageavoid-regionavoid-columnのいずれかの値を持つ要素があれば、その箇所で区切りを行わないようにします。

break-beforeに指定できる値

一般的な値

auto
ボックスの直前に何らかの区切りが挿入可能であれば許可します。これが初期値です。
avoid
ボックスの直前に何らかの区切りが挿入可能であっても禁止します。
always
ボックスが開始する前に強制的に改ページを行います。カラムであれば段ごとに区切りを挿入します。ページ付きメディアの場合は、段組みのコンテナでない限りページ区切りを挿入します。
all
ボックスが開始する前に強制的に改ページを行います。全てのコンテキストで分割しうる形を取ります。ページ付きメディアの中で段組みコンテナがある場合は、ページ区切りと段区切りを行います。

ページ区切り値

page
ボックスが開始する前に改ページを行います。
avoid-page
ボックスが開始する前の改ページを禁止します。
left
ボックスが開始する前に改ページを行い、次のページが左ページになるようにします。
right
ボックスが開始する前に改ページを行い、次のページが右ページになるようにします。
recto
ボックスが開始する前に改ページを行い、次のページが奇数のページになるようにします。奇数ページは、右綴じの場合は左側のページ、左綴じの場合は右側のページになります。
verso
ボックスが開始する前に改ページを行い、次のページが偶数のページになるようにします。偶数ページは、右綴じの場合は右側のページ、左綴じの場合は左側のページになります。

カラム区切り値

column
ボックスが開始する前にカラム区切りを行います。
avoid-page
ボックスが開始する前のカラム区切りを禁止します。

リージョン区切り値

region
ボックスが開始する前にリージョン区切りを行います。
avoid-region
ボックスが開始する前のリージョン区切りを禁止します。

break-beforeの使い方とサンプル

break-beforeプロパティの構文は以下の通りです。

CSS
/* 一般的な区切り値 */
break-before: auto;
break-before: avoid;
break-before: always;
break-before: all;

/* ページ区切り値 */
break-before: page;
break-before: avoid-page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;

/* カラム区切り値 */
break-before: column;
break-before: avoid-column;

/* リージョン区切り値 */
break-before: region;
break-before: avoid-region;

/* グローバル値 */
break-before: inherit;
break-before: initial;
break-before: revert;
break-before: unset;

break-beforeの実例

それでは実際にbreak-beforeプロパティの書き方を見ていきましょう。例えば、カラム分けされたコンテナの中に複数の段落を配置し、break-beforeの値でカラム区切りを許可した場合と禁止した場合とで比較します。

表示確認
CSS
h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.column_box {
	columns: 3;
	width: 300px;
	font-size: 14px;
}
.column_box > p {
	padding-left: .3rem;
	border-left: 2px solid #333;
}
#break_1 > p {
	break-before: column;
}
#break_2 > p  {
	break-before: avoid-column;
}
HTML
<h2>break-before: column;</h2>
<section class="column_box" id="break_1">
	<p>段落1:あいうえおかきくけこ。さしすせそたちつてと。</p>
	<p>段落2:あいうえおかきくけこ。さしすせそたちつてと。</p>
	<p>段落3:あいうえおかきくけこ。さしすせそたちつてと。</p>
</section>
<h2>break-before: avoid-column;</h2>
<section class="column_box" id="break_2">
	<p>段落1:あいうえおかきくけこ。さしすせそたちつてと。</p>
	<p>段落2:あいうえおかきくけこ。さしすせそたちつてと。</p>
	<p>段落3:あいうえおかきくけこ。さしすせそたちつてと。</p>
</section>

break-beforeに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する