CSS widows-Eigenschaft
Die CSS-Eigenschaft widows legt fest, wie viele Zeilen am Anfang einer Seite oder Spalte verbleiben dürfen. Eigenschaft und Beispiele erklärt.
Die CSS-Eigenschaft widows gibt die Mindestanzahl an Zeilen eines Block-Level-Containers an, die am Anfang einer Seite oder Spalte verbleiben müssen.
Eine Witwe (widow) ist eine einzelne Zeile oder ein einzelnes Wort, das allein am Anfang einer Seite oder Spalte erscheint.
Diese Eigenschaft wird vorwiegend in Seitenmedien-Kontexten verwendet, etwa in @media print- oder @page-Regeln.
Die Eigenschaft widows hat eine verwandte Eigenschaft: orphans. Diese gibt die Mindestanzahl an Zeilen an, die am unteren Ende der vorherigen Seite oder Spalte verbleiben müssen. Mit anderen Worten: Die Zeilen am Ende der vorherigen Seite sind Waisen (orphans), während die Zeilen am Anfang der neuen Seite Witwen (widows) sind.
Wozu dient die widows-Eigenschaft?
Wenn ein Absatz über zwei Seiten oder zwei Spalten aufgeteilt wird, kann der Umbruch dazu führen, dass nur eine einzelne, verloren wirkende Zeile am Anfang der nächsten Seite steht. Diese isolierte Zeile ist schwer lesbar und wirkt in gedruckten Dokumenten und mehrspaltigen Layouts unprofessionell.
Mit der Eigenschaft widows legen Sie eine Mindestanzahl von Zeilen fest, die der Browser am Anfang der neuen Seite oder Spalte zusammenhalten muss. Würde der Umbruch weniger Zeilen hinterlassen als erlaubt, schiebt der Browser zusätzliche Zeilen vor, damit der Schwellenwert eingehalten wird. widows: 3 stellt beispielsweise sicher, dass mindestens drei Zeilen eines Absatzes gemeinsam auf die nächste Seite übertragen werden.
Kombinieren Sie widows mit orphans, um beide Enden eines Umbruchs zu steuern: orphans schützt das Ende der verlassenen Seite, widows schützt den Anfang der neuen Seite.
Negative Werte sind ungültig. Der Wert muss eine positive ganze Zahl sein.
| Anfangswert | 2 |
|---|---|
| Gilt für | Block-Container-Elemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.widows = "3"; |
Syntax
CSS widows-Werte
widows: <integer> | initial | inherit;Beispiel der widows-Eigenschaft:
CSS widows-Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eee;
color: #000;
font-size: 1em;
font-family: Roboto, Helvetica, sans-serif;
}
hr {
margin: 50px 0;
}
.example {
margin: 30px auto;
width: 800px;
}
@media print {
.text {
padding: 20px;
background-color: #fff;
columns: 10em 3;
column-gap: 2em;
text-align: justify;
}
.text p {
widows: 2;
}
}
</style>
</head>
<body>
<h2>Widows property example</h2>
<div class="example">
<div class="text">
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</body>
</html>Die Eigenschaft widows wirkt sich nur in fragmentierten Kontexten aus — bei Seitenmedien (Druckvorschau, @page) oder CSS-Mehrspalten-Layouts. Auf einer normalen, durchgehend scrollbaren Webseite gibt es keine Seiten- oder Spaltenumbrüche, sodass die Eigenschaft keinen Effekt hat. Das obige Beispiel verwendet @media print, um dies zu demonstrieren: Öffnen Sie die Druckvorschau des Browsers, um den Effekt zu sehen.
Wann die Eigenschaft greift und wann nicht
Damit widows einen Effekt hat, müssen drei Bedingungen erfüllt sein:
- Der Inhalt wird über Fragmente hinweg aufgeteilt — entweder auf gedruckten Seiten oder in Mehrspalten-Boxen.
- Die Eigenschaft ist für einen Block-Container gesetzt (z. B. ein
<p>oder<div>), nicht für Inline-Text. - Der Umbruch befindet sich innerhalb des betroffenen Blocks. Verwenden Sie page-break-inside (oder
break-inside: avoid), wenn Sie verhindern möchten, dass ein ganzer Block überhaupt aufgeteilt wird.
Die Browser-Unterstützung für widows ist außerhalb des Drucks uneinheitlich. Druck-Engines (PDF-Erzeugung, Druckvorschau) berücksichtigen die Eigenschaft weitgehend, während die Unterstützung in Mehrspalten-Layouts auf dem Bildschirm je nach Browser variiert. Behandeln Sie sie daher eher als progressive Verbesserung denn als Garantie.
Werte
| Wert | Beschreibung |
|---|---|
<integer> | Gibt die Mindestanzahl der Zeilen an, die am Anfang einer Seite oder Spalte verbleiben müssen. Negative Werte sind ungültig. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |