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

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

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

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

初期値2
適用対象ブロックコンテナー要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

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

形式文法

<integer>

HTML

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

CSS

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

p {
  background-color: #8ca0ff;
}

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

結果

仕様書

仕様書 状態 備考
CSS Fragmentation Module Level 3
widows の定義
勧告候補 widows をページ、領域、段など、断片の種類によらず適用するように拡張
CSS Multi-column Layout Module
widows の定義
草案 段組みに関する widows の考慮の勧告
CSS Level 2 (Revision 1)
widows の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 25Edge 完全対応 12Firefox 未対応 なしIE 完全対応 8Opera 完全対応 9.2Safari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,