widows

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

/* <integer> 値 */
widows: 2;
widows: 3;

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

組版において、ウィドウ (widow) とは (段落が前のページから続いている場合に) 段落の最後の行がページの先頭に単独で現れることです。

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

構文

<integer>

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

公式定義

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

形式文法

<integer>

段の widow の制御

HTML

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

CSS

div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

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

結果

仕様書

Specification
CSS Fragmentation Module Level 3 (CSS Fragmentation 3)
# widows-orphans
CSS Multi-column Layout Module Level 2 (CSS Multicol 2)
# filling-columns

ブラウザーの互換性

BCD tables only load in the browser

関連情報