widows CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die widows-Eigenschaft CSS legt die minimale Anzahl von Zeilen in einem Block-Container fest, die am Anfang einer Seite, eines Bereichs oder einer Spalte angezeigt werden müssen.
In der Typografie ist eine Widow die letzte Zeile eines Absatzes, die allein am Anfang einer Seite erscheint. (Der Absatz wird von einer vorhergehenden Seite fortgesetzt.)
Syntax
css
/* <integer> values */
widows: 2;
widows: 3;
/* Global values */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;
Werte
Diese Eigenschaft wird als ein <integer> angegeben:
<integer>-
Die minimale Anzahl von Zeilen, die nach einem Fragmentierungsumbruch allein am Anfang eines neuen Fragments stehen dürfen. Der Wert muss positiv sein.
Formale Definition
| Anfangswert | 2 |
|---|---|
| Anwendbar auf | Blockcontainerelemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
widows =
<integer [1,∞]>
<integer> =
<number-token>
Beispiele
Kontrolle von Spalten-Widows
HTML
html
<div>
<p>This is the first paragraph containing some text.</p>
<p>
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how widows work.
</p>
<p>
This is the third paragraph. It has a little bit more text than the first
one.
</p>
</div>
CSS
css
div {
background-color: #8cffa0;
columns: 3;
widows: 2;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |