orphans

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die orphans CSS Eigenschaft legt die minimale Anzahl von Zeilen in einem Block-Container fest, die unten auf einer Seite, in einer Region oder Spalte angezeigt werden müssen.

In der Typografie ist ein Waise die erste Zeile eines Absatzes, die allein am unteren Rand 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 minimale Anzahl von Zeilen, die sich am unteren Rand eines Fragments vor einem Fragmentierungsbruch befinden 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,∞]>

Beispiele

Festlegen einer minimalen Waisengröße 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