break-insideプロパティの説明
CSSのbreak-insideプロパティは、要素のボックスの途中でページやカラムをどのように区切るかを指定します。例えば、カラムの途中でページ区切りやカラム区切りが発生する場合に、ボックス自体に区切りを入れるか、禁止するかを選べます。
これはブロックレベル要素のボックスの振る舞いに影響します。逆にボックスを持たない内容には影響を与えません。ブラウザで閲覧することを前提としたウェブサイトで、印刷で出力する祭のレイアウトや他のアプリケーションで開く場合の見栄えを調整する時に役立つかもしれません。
区切りの発生については、いくつかの特徴があります。
- 区切りの対象となった要素は、直前に配置された要素の
break-afterの値、直後に配置された要素のbreak-beforeの値、包含要素のbreak-insideの値から影響を受けます。 - 区切りの挿入が考慮される場所で
always、left、right、page、column、regionのいずれかの値を持つ要素があれば、その振る舞いが優先されます。 - 区切りの挿入が考慮される場所で
avoid、avoid-page、avoid-region、avoid-columnのいずれかの値を持つ要素があれば、その箇所で区切りを行わないようにします。
break-insideに指定できる値
auto- ボックスの途中に何らかの区切りが挿入可能であれば許可します。これが初期値です。
avoid- ボックスの途中に何らかの区切りが挿入可能であっても禁止します。
avoid-page- ボックスの途中で改ページすることを禁止します。
avoid-page- ボックスの途中でカラム区切りが発生することを禁止します。
avoid-region- ボックスの途中でリージョン区切りが発生することを禁止します。
break-insideの使い方とサンプルコード
break-insideプロパティの構文は以下の通りです。
/* 一般的な区切り値 */
break-inside: auto;
break-inside: avoid;
/* ページ区切り値 */
break-inside: avoid-page;
/* カラム区切り値 */
break-inside: avoid-column;
/* リージョン区切り値 */
break-inside: avoid-region;
/* グローバル値 */
break-inside: inherit;
break-inside: initial;
break-inside: revert;
break-inside: unset;
break-insideの実例
それでは実際にbreak-insideプロパティの書き方を見ていきましょう。例えば、カラム分けされたコンテナの中に複数の段落を配置し、break-insideの値でカラム区切りを許可した場合と禁止した場合とで比較します。
<h2>break-inside: auto;</h2>
<section class="column_box" id="break_1">
<p>段落１：あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>段落２：あいうえおかきくけこ。さしすせそたちつてと。</p>
<p>段落３：あいうえおかきくけこ。</p>
</section>
<h2>break-inside: avoid;</h2>
<section class="column_box" id="break_2">
<p>段落１：あいうえおかきくけこ。さしすせそたちつてと。なにぬねのはひふへほ。</p>
<p>段落２：あいうえおかきくけこ。さしすせそたちつてと。</p>
<p>段落３：あいうえおかきくけこ。</p>
</section>
h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.column_box {
columns: 3;
width: 300px;
font-size: 14px;
}
.column_box > p {
margin: 1rem 0 0;
padding-left: .3rem;
border-left: 2px solid #333;
}
#break_1 > p {
break-inside: auto;
}
#break_2 > p {
break-inside: avoid;
}