orphans
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die orphans-Eigenschaft von CSS legt die Mindestanzahl von Zeilen in einem Block-Container fest, die am unteren Ende einer Seite, einer Region oder einer Spalte angezeigt werden müssen.
In der Typografie ist eine Waise die erste Zeile eines Absatzes, die alleine am unteren Ende einer Seite erscheint. (Der Absatz wird auf einer 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 Mindestanzahl von Zeilen, die am unteren Ende eines Fragments alleine bleiben können, bevor eine Fragmentierungstrennung erfolgt. 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,∞]>
Beispiele
Festlegen einer Mindestgröße für Waisen 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
| Specification |
|---|
| CSS Fragmentation Module Level 3 # widows-orphans |