CSS page-break-before Eigenschaft
Erfahren Sie, wie die CSS-Eigenschaft page-break-before Seitenumbrüche vor Elementen in gedruckten Dokumenten steuert, mit Werten und Beispielen.
Die CSS-Eigenschaft page-break-before steuert, ob ein Seitenumbruch erzwungen, vermieden oder automatisch vor einem bestimmten Element erfolgt, wenn das Dokument gedruckt oder in einem paginierten Medienkontext (Druck, PDF-Export, Druckvorschau) angezeigt wird.
Auf einem normalen Bildschirm fließt Web-Inhalt in einem kontinuierlichen Scroll, sodass es nichts zu unterbrechen 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-before können Sie diese Entscheidungen beeinflussen – zum Beispiel, um jede Kapitelüberschrift oben auf einer neuen Seite zu beginnen oder um Inhalte zusammenzuhalten.
Die Eigenschaft hat keine sichtbare Wirkung auf dem Bildschirm; sie wird typischerweise in einem @media print-Block platziert, damit die Regeln nur beim Drucken des Dokuments gelten. Sie gilt nicht für absolut positionierte Elemente.
page-break-before ist veraltet. Sie wurde durch die leistungsfähigere Eigenschaft break-before ersetzt, die auch mit Mehrspaltenlayouts und CSS-Region-Layouts funktioniert. Browser behandeln page-break-before als Alias für break-before, sodass bestehender Code weiterhin funktioniert, aber für neuen Code ist break-before zu bevorzugen.
| Anfangswert | auto |
|---|---|
| Gilt für | Elemente auf Blockebene. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.pageBreakBefore = "always"; |
Syntax
page-break-before: auto | always | avoid | left | right | initial | inherit;Beispiel: jedes Kapitel auf einer neuen Seite beginnen
Eine häufige Verwendung ist das Erzwingen, dass jede Überschrift der obersten Ebene auf ihrer eigenen gedruckten Seite beginnt. Wenden Sie page-break-before: always auf jedes h2 an, damit eine neue Seite davor beginnt:
@media print {
h2 {
page-break-before: always;
}
}<h2>Chapter 1</h2>
<p>Content of chapter one...</p>
<h2>Chapter 2</h2>
<p>Content of chapter two...</p>Beim Drucken beginnt „Chapter 2" oben auf einer neuen Seite, selbst wenn „Chapter 1" noch Platz auf der aktuellen Seite gelassen hat.
Beispiel: eine linke oder rechte Seite erzwingen
Bei doppelseitig gedruckten Dokumenten (Bücher, Berichte) können Sie steuern, auf welcher Seite eines Druckbogens das Element beginnt. Verwenden Sie left oder right, um eine ungerade oder gerade Seite vor dem Element zu erzwingen:
@media print {
.chapter-start {
page-break-before: right; /* start on a right-hand (odd) page */
}
}Wenn das Element bereits auf einer rechten Seite beginnen würde, fügt der Browser eine leere Seite ein, um es auf die nächste rechte Seite zu verschieben. Dieses Verhalten entspricht dem von Satzsoftware für Kapitelanfänge in Büchern.
Beispiel: unerwünschte Umbrüche unterdrücken
Verwenden Sie avoid, um einen Umbruch unmittelbar vor einem Element zu vermeiden. Dies ist nützlich, um zu verhindern, dass ein einleitender Absatz von der darüber liegenden Überschrift getrennt wird:
@media print {
h2 + p {
page-break-before: avoid;
}
}Beachten Sie, dass avoid ein Hinweis ist, keine Garantie. Wenn es keine andere sinnvolle Stelle für den Seitenumbruch gibt, kann der Browser dennoch einen Umbruch einfügen.
Werte
| Wert | Beschreibung |
|---|---|
auto | Standard. Der Browser entscheidet, ob vor dem Element ein Seitenumbruch eingefügt wird. |
always | Erzwingt einen Seitenumbruch vor dem Element. |
avoid | Vermeidet einen Seitenumbruch vor dem Element. Der Browser versucht, hier keinen Umbruch einzufügen, kann es aber bei Bedarf tun. |
left | Erzwingt so viele Seitenumbrüche vor dem Element, dass die nächste Seite eine linke (gerade nummerierte) Seite ist. Kann eine leere Seite einfügen. |
right | Erzwingt so viele Seitenumbrüche vor dem Element, dass die nächste Seite eine rechte (ungerade nummerierte) Seite ist. Kann eine leere Seite einfügen. |
initial | Setzt diese Eigenschaft auf ihren Standardwert (auto). |
inherit | Erbt diese Eigenschaft vom übergeordneten Element. |
Die Werte left und right sind für den doppelseitigen Druck gedacht, bei dem Inhalte auf einer bestimmten Seite des Druckbogens beginnen sollen.
Browser-Unterstützung und Besonderheiten
- Alle gängigen Browser unterstützen
auto,alwaysundavoid. Die Unterstützung fürleftundrightist bei Browsern und PDF-Renderern weniger einheitlich. - Die Eigenschaft wird bei Inline-Elementen und absolut oder fest positionierten Elementen ignoriert. Verwenden Sie Elemente auf Blockebene wie
<div>,<section>,<h1>–<h6>oder<p>. - Das Setzen von
page-break-before: alwaysauf jedes Element einer Liste oder Tabelle kann viele kurze Seiten erzeugen. Verwenden Sie es gezielt an logischen Abschnittsgrenzen. page-break-beforebei einem untergeordneten Element wird auf die nächstgelegene Blockebene-Box angewendet, die es erzeugt – nicht auf den übergeordneten Container.
Tipp: mit den anderen Seitenumbruch-Eigenschaften kombinieren
page-break-before ist eine von drei veralteten Eigenschaften für das Drucklayout. Verwenden Sie sie zusammen für vollständige Kontrolle:
page-break-after— steuert Umbrüche nach einem Element.page-break-inside— verhindert, dass ein Element (eine Tabelle, eine Abbildung oder ein Codeblock) auf zwei Seiten aufgeteilt wird.
Migrieren Sie für modernen Code zu den entsprechenden Fragmentierungseigenschaften:
break-before— ersetztpage-break-before.break-after— ersetztpage-break-after.break-inside— ersetztpage-break-inside.
Lesen Sie den Leitfaden zu @media print für Tipps zum Erstellen eines vollständigen Druckstylesheets sowie die Eigenschaften orphans und widows für die Steuerung, wie viele Zeilen eines Absatzes vor oder nach einem Umbruch auf einer Seite verbleiben.