Die CSS-Eigenschaft widows
legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die oben auf einer Seite, einem Bereich oder einer Spalte angezeigt werden müssen.
/* <integer> values */
widows: 2;
widows: 3;
/* Global values */
widows: inherit;
widows: initial;
widows: unset;
Hinweis: In der Typografie ist ein Hurenkind die letzte Zeile eines Absatzes, die allein oben auf einer Seite angezeigt wird (der Absatz wird von einer vorherigen Seite fortgesetzt).
Syntax
Werte
<integer>
- Die Mindestanzahl von Zeilen, die nach einem Fragmentierungsbruch ganz oben an einem neuen Fragment bleiben können. Der Wert muss positiv sein.
Formale Definition
Initialwert | 2 |
---|---|
Anwendbar auf | Blockcontainerelemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiel
Spalten kontrollierendes widows
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
div {
background-color: #8cffa0;
columns: 3;
widows: 2;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Ergebnis
Spezifikationen
Specification | Status | Comment |
---|---|---|
CSS Fragmentation Module Level 3 Die Definition von 'widows' in dieser Spezifikation. |
Anwärter Empfehlung | Erweitert widows , die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten. |
CSS Multi-column Layout Module Die Definition von 'widows' in dieser Spezifikation. |
Arbeitsentwurf |
Empfehlungen zur Berücksichtigung von |
CSS Level 2 (Revision 1) Die Definition von 'widows' in dieser Spezifikation. |
Empfehlung | Initiale Definition. |
Browserkompatibilität
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.