CSS-Eigenschaft orphans

Die Eigenschaft orphans gibt die minimale Anzahl von Zeilen eines Containers auf Blockebene, die unten auf einer Seite oder Spalte belassen werden können, an.

Ein Waisenkind ist die erste Zeile eines Absatzes, der allein am Ende einer Seite erscheint und der Absatz wird auf einer Folgeseite fortgesetzt.

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

Syntax

orphans: <integer> | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft orphans</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
        </p>
        <p>
          <span style="color: #8ebf42; font-weight: bold">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</span>
        </p>
        <p>
          Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.
        </p>
        <p>
          Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.
        </p>
        <p>
         Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.
        </p>
      </div>
    </div>
  </body>
</html>

Im vorliegenden Beispiel bleiben vier Zeilen aus dem grün markierten Absatz am Ende der ersten Spalte übrig.

Werte

Wert Beschreibung
<integer> Gibt die Anzahl der Zeilen an, die am Ende einer Seite oder Spalte belassen werden können. Negative Werte sind ungültig.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
25.0+ 7.0+ 10.0+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'Orphans'?
Finden Sie das nützlich?