レイアウト

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 や負の数、小数は書けません。

コメント