レイアウト
orphans
orphans は、段組みや印刷のページの切れ目で段落が分かれるとき、切れ目の前(段やページの下)に最低何行残すかを指定します。残せないときは段落ごと次の段やページへ送ります。
構文
<integer>プレビュー
Intro 1
Intro 2
Intro 3Line 1
Line 2
Line 3
Line 4
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-count: 2;
column-fill: auto;
orphans: 3;
}コントロール
orphans3
Intro 1
Intro 2
Intro 3Line 1
Line 2
Line 3
Line 4
解説
値の意味
2などの 1 以上の整数:切れ目の前に残す行の数です。初期値は2です。
プレビューの箱は column-fill: auto の 2 段組みで、1 段目から順に行を詰めます。灰色の前置き 3 行のあとに、水色の 4 行の段落が続きます。1 段目には段落の 2 行が入るので、2 では 2 行を残して分かれ、3 では残せないので段落がまるごと 2 段目へ移ります。
よく使う場面
段組みや印刷で、段落の 1 行目だけが段やページの下にぽつんと残るのを防ぎたいときに書きます。
気をつけること
- 数えるのは、1 つのブロックの中の行です。見出しと次の段落のような、別々の要素のあいだの切れ目には効きません(そこは
break-afterなどで決めます)。 - Firefox は対応していません。Chrome・Edge・Safari で効きます。
- 切れ目のあとに残す行の数は
widowsで決めます。どちらも継承するので、bodyなどにまとめて書けます。 0や負の数、小数は書けません。