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