このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
widows
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
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,∞]>
<integer> =
<number-token>
例
段のウィドウの制御
HTML
html
<div>
<p>これは幾らかのテキストを含む最初の段落です。</p>
<p>
これは最初の段落よりも多くのテキストを含む第二の段落です。これは widows がどの様に動作するのかを示すために用います。
</p>
<p>
これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。
</p>
</div>
CSS
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-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。