CSS orphans-Eigenschaft

Die CSS-Eigenschaft orphans legt die Mindestanzahl von Zeilen eines Block-Level-Elements fest, die am unteren Rand einer Seite, Region oder Spalte verbleiben müssen, wenn das Element an einer Fragmentierungsgrenze umbrochen wird. Würden durch die Einhaltung des Werts weniger Zeilen als erforderlich übrig bleiben, verschiebt der Browser die gesamte Zeilengruppe auf die nächste Seite oder Spalte.

Diese Seite erklärt, was ein Waisenkind ist, wann die Eigenschaft tatsächlich wirksam ist, ihre Syntax und Werte sowie ein ausführbares Beispiel.

Was ist ein Waisenkind?

In der Typografie bezeichnet ein Waisenkind (englisch: orphan) die erste Zeile eines Absatzes, die allein am unteren Ende einer Seite oder Spalte zurückbleibt, während der Rest des Absatzes auf der nächsten Seite fortgesetzt wird. Waisenkinder sehen unschön aus, deshalb ermöglicht die Eigenschaft, dem Browser mitzuteilen, wie viele Zeilen mindestens zusammengehalten werden sollen.

Page 1 (bottom)              Page 2 (top)
┌──────────────────┐         ┌──────────────────┐
│ ...               │        │ but the leap into │  ← orphan: just 1 line
│                   │        │ electronic ...    │     was left behind on
│ It has survived   │        │                   │     page 1 → looks bad
└──────────────────┘         └──────────────────┘

Mit orphans: 2 wird ein Absatz, der nur eine Zeile am unteren Rand hinterlassen würde, vollständig auf die nächste Seite verschoben, sodass mindestens zwei Zeilen zusammenbleiben.

Wann wird `orphans` angewendet?

Die Eigenschaft ist nur in fragmentierten Kontexten relevant – also dort, wo Inhalte auf mehrere Boxen aufgeteilt werden:

Drucken (und Druckvorschau / PDF-Druck), wo Fließinhalte auf mehrere Seiten umbrochen werden.
Mehrspaltige Layouts, die mit der Eigenschaft columns erstellt werden, wo Zeilen über Spalten umbrechen.
CSS Paged Media, häufig in Kombination mit der @media-Regel (z. B. @media print { … }), um sie nur beim Drucken anzuwenden.

In gewöhnlichen, einspaltigen Bildschirmlayouts gibt es keinen Seiten- oder Spaltenumbruch, sodass das Setzen von orphans keinen sichtbaren Effekt hat. Um es in Aktion zu sehen, öffnen Sie das folgende Beispiel in der Druckvorschau oder verwenden Sie das mitgelieferte mehrspaltige Layout.

Die Eigenschaft orphans hat eine Schwestereigenschaft, widows, die die Mindestanzahl von Zeilen festlegt, die am Anfang der folgenden Seite oder Spalte erlaubt sind. Sie werden in der Regel zusammen gesetzt.

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

Syntax

orphans: <integer> | initial | inherit;

Der Wert muss eine positive ganze Zahl sein. Negative Werte und 0 sind ungültig und werden ignoriert (die Eigenschaft behält ihren vorherigen Wert). Der Standardwert ist 2.

Beispiel der orphans-Eigenschaft

CSS orphans 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;
      }
      .text {
        padding: 20px;
        background-color: #fff;
        -moz-columns: 10em 3;
        -webkit-columns: 10em 3;
        columns: 10em 3;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-gap: 2em;
        text-align: justify;
      }
      .text p {
        orphans: 4;
      }
    </style>
  </head>
  <body>
    <h2>Orphans 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>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply 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.</span>
        </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>

Probier es selbst »

Im gezeigten Beispiel erzwingt orphans: 4, dass mindestens vier Zeilen jedes Absatzes am Ende einer Spalte zusammenbleiben. Der grüne Absatz veranschaulicht dies: Der Browser hält vier seiner Zeilen am unteren Rand der ersten Spalte, anstatt eine einzelne verlorene Zeile dort hängen zu lassen.

orphans nur beim Drucken anwenden

Da orphans nur fragmentierte Inhalte beeinflusst, ist es ein gängiges Muster, es mit einer Media Query auf die Druckausgabe zu beschränken:

@media print {
  p {
    orphans: 3;
    widows: 3;
  }
}

Dies hält mindestens drei Zeilen am unteren (orphans) und oberen (widows) Rand jeder gedruckten Seite zusammen, ohne das Bildschirmlayout zu beeinflussen.

Werte

Wert	Beschreibung
`<integer>`	Gibt die Anzahl der Zeilen an, die am Ende einer Seite oder Spalte verbleiben dürfen. Negative Werte sind ungültig.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übungen

Übung

Was macht die Eigenschaft 'orphans' in CSS?

Sie legt die Mindestanzahl von Zeilen in einem Block-Container fest, die beim Aufteilen des Block-Containers zwischen zwei Seiten am unteren Rand einer Seite verbleiben müssen.Sie legt die Hintergrundfarbe eines Elements fest.Sie steuert das Verhalten von Tabellen.Sie passt die Textfarbe in einem Element an.Sie legt die Mindestanzahl von Zeilen in einem Block-Container fest, die beim Aufteilen des Block-Containers zwischen zwei Seiten oben auf der nächsten Seite angezeigt werden müssen.