CSS-Eigenschaft orphans
Die Eigenschaft orphans wird verwendet, um die Mindestanzahl von Zeilen eines Block-Containers festzulegen, die am unteren Rand einer Seite oder Spalte stehen bleiben dürfen.
Ein „Orphan“ ist die erste Zeile eines Absatzes, die allein am unteren Rand einer Seite erscheint, während der Absatz auf der folgenden Seite fortgesetzt wird.
Die Eigenschaft orphans wird häufig zusammen mit der Regel @media verwendet, um die Anzahl der Orphans festzulegen, die am Ende einer Seite zulässig sind. Sie kann auch in mehrspaltigen Layouts für Webseiten und digitale Dokumente verwendet werden. In diesem Fall legt sie die Anzahl der Zeilen fest, die am Ende einer Spalte zulässig sind.
Die Eigenschaft orphans hat eine Schwester-Eigenschaft: widows, die die Anzahl der Zeilen angibt, die am Anfang der folgenden Seite/Spalte stehen.
| Initial Value | 2 |
|---|---|
| Applies to | Block container elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.orphans = "2"; |
Syntax
CSS orphans syntax
orphans: <integer> | initial | inherit;Example of the orphans property:
CSS orphans code example
<!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>Im gegebenen Beispiel bleiben vier Zeilen aus dem grün hervorgehobenen Absatz am Ende der ersten Spalte stehen.
Values
| Value | Description |
|---|---|
<integer> | Gibt die Anzahl der Zeilen an, die am Ende einer Seite oder Spalte stehen bleiben dürfen. Negative Werte sind ungültig. |
| initial | Verwendet für die Eigenschaft ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Practice
Was bewirkt die CSS-Eigenschaft 'orphans'?