orphans CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Die orphans CSS-Eigenschaft legt die minimale Anzahl von Zeilen in einem Block-Container fest, die am Ende einer Seite, eines Bereichs oder einer Spalte angezeigt werden müssen.
In der Typografie bezeichnet man als Waisen die erste Zeile eines Absatzes, die alleine am Ende einer Seite erscheint. (Der Absatz wird auf der folgenden Seite fortgesetzt.)
Syntax
css
/* <integer> values */
orphans: 2;
orphans: 3;
/* Global values */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;
Werte
<integer>-
Die minimale Anzahl von Zeilen, die am Ende eines Fragments vor einem Fragmentationswechsel alleine stehen 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
orphans =
<integer [1,∞]>
<integer> =
<number-token>
Beispiele
Festlegen einer minimalen Waisenanzahl von drei Zeilen
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 orphans 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;
height: 150px;
columns: 3;
orphans: 3;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |