page-breakIn CSS gibt es keine tatsächliche Eigenschaft. Es ist eigentlich eine Reihe von drei Eigenschaften: page-break-before, page-break-afterund page-break-inside. Mithilfe dieser Eigenschaften können Sie festlegen, wie sich das Dokument beim Drucken verhalten soll. Zum Beispiel, um ein gedrucktes Dokument buchartiger zu machen.
Eigenschaften
Seitenumbruch vor
Die page-break-beforeEigenschaft fügt vor dem Element, auf das sie angewendet wird, einen Seitenumbruch hinzu.
Hinweis : Diese Eigenschaft wird derzeit durch die allgemeinere break-beforeEigenschaft ersetzt. Diese neue Eigenschaft behandelt auch Spalten- und Regionsumbrüche, während sie syntaktisch kompatibel ist page-break-before. page-break-beforeÜberprüfen Sie daher vor der Verwendung , ob Sie break-beforestattdessen verwenden können.
Ein häufiger Anwendungsfall hierfür ist das Anwenden auf die #commentsAuswahl, sodass ein Benutzer, der eine Seite mit Kommentaren druckt, leicht das gesamte Dokument drucken kann, aber vor den Kommentaren sauber anhält.
Seitenumbruch danach
Die page-break-afterEigenschaft fügt nach dem Element, auf das sie angewendet wird, einen Seitenumbruch hinzu.
Hinweis : Diese Eigenschaft wird derzeit durch die allgemeinere break-afterEigenschaft ersetzt. Diese neue Eigenschaft behandelt auch Spalten- und Regionsumbrüche, während sie syntaktisch kompatibel ist page-break-after. page-break-afterÜberprüfen Sie daher vor der Verwendung , ob Sie break-afterstattdessen verwenden können.
Seitenumbruch
Die page-break-insideEigenschaft fügt einen Seitenumbruch innerhalb des Elements hinzu, auf das sie angewendet wird.
Syntax
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidDie leftund right-Werte für page-break-beforeund page-break-afterbeziehen sich auf ein verbreitetes Layout (wie ein Buch), bei dem es unterschiedliche linke und rechte Seiten gibt. Sie arbeiten so:
leftErzwingt ein oder zwei Seitenumbrüche nach dem Element, sodass die nächste Seite als linke Seite formatiert wird.rightErzwingt ein oder zwei Seitenumbrüche nach dem Element, sodass die nächste Seite als rechte Seite formatiert wird.
Betrachten Sie alwaysals eine Mischung aus beiden. Die Spezifikation sagt:
Ein konformer Benutzeragent kann die Werte "links" und "rechts" als "immer" interpretieren.
Beispiel
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Dieses Code-Snippet macht drei Dinge:
- Es erzwingt einen Seitenumbruch vor allen
h2Überschriften (möglicherweise sind H2-Tags in Ihrem Dokument Kapitelüberschriften, die eine neue Seite verdienen). - Es verhindert Seitenumbrüche direkt nach Unterüberschriften, da dies seltsam aussieht
- Es verhindert Seitenumbrüche in
preTags und Anführungszeichen auf Blockebene
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Irgendein | Irgendein | Irgendein | 7+ | 4+ | TBD | TBD |
Sie können von mobilen Geräten wie AirPrint unter iOS aus drucken, aber wir haben nicht so viel getestet. Wenn jemand Daten zum Support hat, lassen Sie es uns wissen.