レイアウト

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

コメント