widows

Limited availability

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

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

In der Typografie ist eine Widow die letzte Zeile eines Absatzes, die alleine oben auf einer Seite erscheint. (Der Absatz wird von einer vorherigen Seite fortgesetzt.)

Syntax

css
/* <integer> values */
widows: 2;
widows: 3;

/* Global values */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;

Werte

<integer>

Die minimale Anzahl von Zeilen, die nach einem Fragmentierungsbruch alleine am Anfang eines neuen Fragments verbleiben können. Der Wert muss positiv sein.

Formale Definition

Anfangswert2
Anwendbar aufBlockcontainerelemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

Beispiele

Steuerung von Spalten-Widows

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 widows 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;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

Ergebnis

Spezifikationen

Specification
CSS Fragmentation Module Level 3
# widows-orphans
CSS Multi-column Layout Module Level 1
# filling-columns

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
widows

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch