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 minimale Anzahl von Zeilen in einem Block-Container fest, die unten auf einer Seite, einem Bereich oder in einer Spalte angezeigt werden müssen.

In der Typografie ist eine Waise die erste Zeile eines Absatzes, die allein am unteren Rand 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 vor einem Fragmentierungsbruch alleine am unteren Rand eines Fragments bleiben können. Der Wert muss positiv sein.

Formale Definition

Initialer Wert2
Anwendbar aufBlockcontainerelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

orphans = 
  <integer [1,∞]>

Beispiele

Setzen 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch