Witwen - CSS-Tricks

Anonim

Typografisch gesehen ist eine Witwe die letzte Zeile eines Absatzes, die auf einer neuen Seite oder in einer neuen Spalte allein gelassen wird. Die widowsEigenschaft in CSS steuert die Mindestanzahl von Zeilen eines Absatzes, die auf eine neue Seite fallen können. Diese Eigenschaft betrifft nur ausgelagerte Medien wie z print.

@media print ( p ( widows: 3; ) )

Wenn ein Absatz nicht vollständig auf eine Seite passt, wird er geteilt, wo immer dies möglich ist. Auf diese Weise können einzelne Zeilen eines Absatzes auf einer Seite angezeigt werden, bevor sie auf der nächsten Seite fortgesetzt werden. Dies ist normalerweise unerwünscht, so dass bei vielen Textverarbeitungsprogrammen mindestens zwei Zeilen auf einer alten Seite anstelle einer Zeile verbleiben müssen. Die orphanEigenschaft verhält sich ähnlich. Sie können ihm entweder eine positive Zahl geben (wobei 2 die Standardeinstellung ist) oder inherit.

Beachten Sie, dass die widowsEigenschaft im Allgemeinen keine nicht ausgelagerten Medien wie z screen. Browser, die beide unterstützen widowsund columnsdie beabsichtigte Funktionalität auch auf Spalten anwenden. Außerdem wirkt sich die Eigenschaft nur auf Elemente auf Blockebene aus.

Kurz gesagt, speziell in CSS:
  • widows= Mindestanzahl von Zeilen in einem auf der neuen Seite geteilten Absatz .
  • orphans= Mindestanzahl von Zeilen in einem Absatz, der auf der alten Seite aufgeteilt ist.
Die roten Linien sind Witwen.

verbunden

  • Waisenkinder

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
25 Nein 8 12 7

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Nein 4.4 7.0-7.1