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