CSS page-break Eigenschaft
Die CSS page-break-Eigenschaft umfasst drei Eigenschaften: page-break-before, page-break-after und page-break-inside. Mit Beispielen erklärt.
Es gibt keine einzelne page-break-Eigenschaft in der CSS-Spezifikation. Der Name bezeichnet eine Familie von drei verwandten Eigenschaften: page-break-before, page-break-after und page-break-inside. Zusammen steuern sie, wo ein Seitenumbruch erfolgt, wenn ein Dokument an einen Drucker gesendet (oder als PDF gespeichert) wird, damit verwandte Inhalte zusammenbleiben und Überschriften, Tabellen oder Bilder nicht auf zwei Seiten aufgeteilt werden.
Diese Eigenschaften wirken sich nur in seitenbasierten Medien aus – also beim Drucken oder in der Druckvorschau. Auf einem normalen Bildschirm haben sie keine sichtbare Wirkung, weshalb man sie fast immer innerhalb eines @media print-Blocks setzt. Sie haben auch keine Wirkung auf ein leeres <div> oder auf absolut positionierte Elemente.
Diese Seite behandelt alle drei Eigenschaften, wann man welche verwendet und die modernen Ersatzlösungen, die man in neuem Code bevorzugen sollte.
Wann verwende ich das?
Häufige Gründe, Seitenumbrüche zu steuern:
- Jeden Abschnitt auf einer neuen Seite beginnen – z. B. einen Seitenumbruch vor jedem
<h1>in einem langen Bericht erzwingen. - Blöcke zusammenhalten – verhindern, dass eine Tabelle, eine Abbildung oder ein Codeblock auf zwei Seiten aufgeteilt wird.
- Verwaiste Überschriften vermeiden – eine Überschrift, die ganz unten auf einer Seite landet und deren Inhalt sich auf der nächsten befindet, wirkt fehlerhaft.
Moderne Ersatzlösungen: die break-*-Eigenschaften
Die page-break-*-Eigenschaften sind veraltet. Die CSS-Fragmentierungsspezifikation hat sie durch die kürzeren Eigenschaften break-before, break-after und break-inside ersetzt, die auch für mehrspaltige und Regions-Layouts funktionieren – nicht nur beim Drucken. Browser unterstützen weiterhin die alten Namen zur Abwärtskompatibilität und ordnen sie den neuen zu. Der einfachste robuste Ansatz besteht daher darin, beide zu deklarieren:
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}Der Rest dieser Seite zeigt jede veraltete Eigenschaft neben ihrem modernen Äquivalent.
page-break-after
page-break-after fügt einen Seitenumbruch nach einem Element ein. Zum Beispiel, um ein Kapitel zu beenden, sodass das nächste auf einer neuen Seite beginnt:
Die Eigenschaft page-break-after wird durch die Eigenschaft break-after ersetzt.
CSS page-break-after Codebeispiel
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before fügt einen Seitenumbruch vor einem Element ein – praktisch, um jede Hauptüberschrift auf einer neuen Seite beginnen zu lassen:
Die Eigenschaft page-break-before wird durch die Eigenschaft break-before ersetzt.
CSS page-break-before Codebeispiel
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}Die Werte left und right sind nützlich beim beidseitigen Drucken: Sie erzwingen genügend Umbrüche, sodass das nächste Element auf einer linken bzw. rechten Seite beginnt.
page-break-inside
page-break-inside steuert, ob ein Umbruch innerhalb eines Elements erlaubt ist. Mit avoid verhindert man, dass eine Tabelle, eine Abbildung oder ein Absatz auf zwei Seiten aufgeteilt wird. Es akzeptiert nur auto und avoid.
Die Eigenschaft page-break-inside wird durch die Eigenschaft break-inside ersetzt.
Beispiel der break-inside-Eigenschaft:
Das folgende Beispiel verwendet die moderne Eigenschaft break-inside, die das veraltete page-break-inside ersetzt.
CSS page-break und break-inside Eigenschaften Beispiel|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Der Browser entscheidet, wo umgebrochen wird. Dies ist der Standardwert. |
| always | Erzwingt immer einen Seitenumbruch (vor oder nach dem Element). |
| avoid | Vermeidet einen Seitenumbruch (vor, nach oder innerhalb des Elements). |
| left | Erzwingt einen oder zwei Umbrüche, sodass der folgende Inhalt auf einer linken Seite beginnt. |
| right | Erzwingt einen oder zwei Umbrüche, sodass der folgende Inhalt auf einer rechten Seite beginnt. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Welche Werte für welche Eigenschaft gelten:
| Eigenschaft | Akzeptierte Werte |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Verwandte Themen
break-after— der moderne Ersatz fürpage-break-after.break-inside— der moderne Ersatz fürpage-break-inside.@media— wird verwendet, um die Druckausgabe mit@media printanzusprechen.columns— mehrspaltiges Layout, bei dembreak-insideebenfalls nützlich ist.