widows CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die widows CSS-Eigenschaft legt die Mindestanzahl von Zeilen in einem Block-Container fest, die am Anfang einer Seite, Region oder Spalte angezeigt werden müssen.
In der Typografie ist eine Widow die letzte Zeile eines Absatzes, die alleine am Anfang einer Seite erscheint. (Der Absatz wird von einer vorherigen Seite fortgesetzt.)
Syntax
css
/* <integer> values */
widows: 2;
widows: 3;
/* Global values */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;
Werte
<integer>-
Die Mindestanzahl von Zeilen, die nach einem Fragmentierungswechsel alleine am Anfang eines neuen Fragments bleiben können. 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 |