widows

Limited availability

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

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

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

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

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

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

構文

<integer>

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

公式定義

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

形式文法

段のウィドウの制御

HTML

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

CSS

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
# widows-orphans
CSS Multi-column Layout Module Level 1
# filling-columns

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
widows

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報