CSS widows-Eigenschaft

Die CSS-Eigenschaft widows gibt die Mindestanzahl an Zeilen eines blockartigen Containers an, die oben auf einer Seite oder Spalte verbleiben muss.

Ein Widow ist eine einzelne Zeile oder ein einzelnes Wort, das allein oben auf einer Seite oder Spalte erscheint.

Diese Eigenschaft wird hauptsächlich im Kontext von paginierten Medien verwendet, beispielsweise in @media print- oder @page-Regeln.

Die Eigenschaft widows hat eine verwandte Eigenschaft: orphans, die die Mindestanzahl an Zeilen angibt, die unten auf der vorherigen Seite oder Spalte verbleiben müssen. Mit anderen Worten: Die Zeilen, die am Ende der vorherigen Seite verbleiben, sind Orphans, während die Zeilen, die oben auf der neuen Seite verbleiben, Widows sind.

INFO

Negative Werte sind ungültig.

Anfangswert	2
Gilt für	Block-Container-Elemente.
Vererbt	Ja.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	object.style.widows = "3";

Syntax

CSS widows Werte

css

widows: <integer> | initial | inherit;

Beispiel für die widows-Eigenschaft:

CSS widows Codebeispiel

html

<!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>

Try it Yourself »

note
Die Eigenschaft widows wirkt sich nur in paginierten Medien aus (z. B. Druckvorschau). Das Beispiel verwendet @media print, um dies zu veranschaulichen.

Werte

Wert	Beschreibung
`<integer>`	Gibt die Mindestanzahl an Zeilen an, die oben auf einer Seite oder Spalte verbleiben müssen. Negative Werte sind ungültig.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Practice

Welche Aussage ist korrekt bezüglich der CSS widows-Eigenschaft?

Ein ganzzahliger Wert gibt die Anzahl der Zeilen an, die am Ende einer Seite oder Spalte verbleiben dürfen.Diese Eigenschaft wird niemals mit der @media-Regel verwendet.Die widows-Eigenschaft hat eine verwandte Eigenschaft: die orphans-Eigenschaft.Es handelt sich um eine animierbare Eigenschaft.

CSS widows-Eigenschaft ​

Syntax ​

Beispiel für die widows-Eigenschaft: ​

Werte ​

Practice ​

CSS widows-Eigenschaft

Syntax

Beispiel für die widows-Eigenschaft:

Werte

Practice