CSS page-break-after Eigenschaft
Die CSS-Eigenschaft page-break-after legt einen Seitenumbruch nach einem bestimmten Element fest. Hier finden Sie die verfügbaren Werte.
Die CSS-Eigenschaft page-break-after steuert, ob ein Seitenumbruch nach einem bestimmten Element erzwungen oder vermieden wird, wenn das Dokument gedruckt oder in einem Seitenmedien-Kontext (Drucken, PDF-Export, Druckvorschau) angezeigt wird. Ein Seitenumbruch beendet die aktuelle Seite und verschiebt den nachfolgenden Inhalt auf eine neue Seite.
Auf einem normalen Bildschirm fließt Web-Inhalt in einem kontinuierlichen Scroll, sodass es nichts zu umbrechen gibt. Wenn dieselbe Seite jedoch an einen Drucker gesendet oder als PDF gespeichert wird, muss der Browser entscheiden, wo ein Blatt Papier endet und das nächste beginnt. Mit page-break-after können Sie diese Entscheidungen beeinflussen — zum Beispiel, um jedes neue Kapitel oben auf einer neuen Seite zu beginnen, oder um zu verhindern, dass eine Überschrift allein am unteren Rand einer Seite hängt.
Die Eigenschaft hat keine sichtbare Wirkung auf dem Bildschirm; typischerweise platziert man sie innerhalb eines @media print-Blocks, damit die Regeln nur beim Drucken des Dokuments gelten. Sie gilt nicht für absolut positionierte Elemente.
page-break-after ist veraltet. Sie wurde durch die leistungsfähigere Eigenschaft break-after ersetzt, die auch mit mehrspaltigem Layout und Regions-Layouts funktioniert. Für neuen Code sollte break-after bevorzugt werden. Browser behandeln page-break-after als Alias von break-after, sodass bestehende Websites weiterhin funktionieren.
| Anfangswert | auto |
|---|---|
| Gilt für | Elemente auf Blockebene. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.pageBreakAfter = "avoid"; |
Syntax
page-break-after: auto | avoid | always | left | right | initial | inherit;Beispiel: jeden Abschnitt auf einer neuen Seite beginnen
Eine häufige Anwendung ist das Erzwingen, dass jeder Abschnitt der obersten Ebene auf seiner eigenen gedruckten Seite beginnt. Wenden Sie page-break-after: always auf jeden Abschnitt an, damit nach ihm ein Umbruch eingefügt wird:
@media print {
.chapter {
page-break-after: always;
}
}<div class="chapter">
<h2>Chapter 1</h2>
<p>...content...</p>
</div>
<div class="chapter">
<h2>Chapter 2</h2>
<p>...content...</p>
</div>Beim Drucken beginnt Kapitel 2 nun oben auf Seite 2.
Beispiel: einen Seitenumbruch nach einem Element verhindern
Verwenden Sie avoid, um einen Umbruch direkt nach einem Element zu verhindern — zum Beispiel, damit eine Überschrift nicht allein am unteren Rand einer Seite sitzt, getrennt vom nachfolgenden Text:
@media print {
h2 {
page-break-after: avoid;
}
}Tipp: mit page-break-before und page-break-inside kombinieren
page-break-after ist eine von drei verwandten Eigenschaften. Verwenden Sie sie gemeinsam für die vollständige Kontrolle über gedruckte Layouts:
page-break-before— steuert Umbrüche vor einem Element.page-break-inside— verhindert, dass ein Element (eine Tabelle oder Abbildung) über zwei Seiten aufgeteilt wird.
Werte
| Wert | Beschreibung |
|---|---|
| auto | Standard. Lässt den Browser entscheiden, ob nach dem Element ein Seitenumbruch eingefügt werden soll. |
| avoid | Vermeidet nach Möglichkeit einen Seitenumbruch nach dem Element. |
| always | Erzwingt immer einen Seitenumbruch nach dem Element. |
| left | Erzwingt einen Seitenumbruch nach dem Element, sodass die nächste Seite als linke Seite formatiert wird. |
| right | Erzwingt einen Seitenumbruch nach dem Element, sodass die nächste Seite als rechte Seite formatiert wird. |
| initial | Setzt diese Eigenschaft auf ihren Standardwert (auto). |
| inherit | Erbt diese Eigenschaft vom übergeordneten Element. |
Die Werte left und right sind hauptsächlich beim beidseitigen Drucken nützlich, wenn ein Abschnitt auf einer bestimmten Seite des Bogens beginnen soll.
Hinweis: Für moderne Web-Entwicklung sollte stattdessen die Eigenschaft break-after verwendet werden, da page-break-after veraltet ist.