Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
orphans CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
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
/* <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
<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
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 |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.