widows
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
widows は CSS のプロパティで、ページ、領域、段の先頭に表示されるブロックコンテナーの最小行数を設定します。
組版において、ウィドウ (widow) とは (段落が前のページから続いている場合に) 段落の最後の行がページの先頭に単独で現れることです。
構文
css
/* <integer> 値 */ widows: 2; widows: 3; /* グローバル値 */ widows: inherit; widows: initial; widows: revert; widows: revert-layer; widows: unset; 値
<integer>-
区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。
公式定義
| 初期値 | 2 |
|---|---|
| 適用対象 | ブロックコンテナー要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
形式文法
widows =
<integer [1,∞]>
例
段のウィドウの制御
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 |