orphans

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

orphans は CSS のプロパティで、ページ、領域、段の最下部に表示されるブロックコンテナーの最小行数を設定します。

css
/* <integer> 値 */
orphans: 2;
orphans: 3;

/* グローバル値 */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: unset;

組版において、オルファン (orphan) とは段落の最初の行がページの末尾に単独で現れることです。 (段落は次のページへ続きます。)

構文

値

<integer>

区切りの前の新しい断片の末尾に残すことができる最小行数です。値は正の数である必要があります。

公式定義

初期値2
適用対象ブロックコンテナー要素
継承あり
計算値指定通り
アニメーションの種類計算値の型による

形式文法

orphans = 
  <integer [1,∞]>

例

オルファンを 3 行の大きさに設定

HTML

html
<div>
  <p>これは幾らかのテキストを含む最初の段落です。</p>
  <p>
    これは最初の段落よりも多くのテキストを含む第二の段落です。これは orphans がどの様に動作するのかを示すために用います。
  </p>
  <p>
    これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。
  </p>
</div>

CSS

css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

結果

仕様書

Specification
CSS Fragmentation Module Level 3
# widows-orphans

ブラウザーの互換性

BCD tables only load in the browser

関連情報