DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Es gibt keine tatsächliche CSS-Eigenschaft page-break. Es ist tatsächlich eine Gruppe von 3 Eigenschaften: page-break-before, page-break-after und page-break-inside. Diese Eigenschaften helfen zu definieren, wie sich das Dokument beim Drucken verhalten soll. Zum Beispiel, um ein gedrucktes Dokument buchähnlicher zu gestalten.
Eigenschaften
page-break-before
Die Eigenschaft page-break-before fügt einen Seitenumbruch vor dem Element ein, auf das sie angewendet wird.
Hinweis: Diese Eigenschaft wird derzeit durch die allgemeinere Eigenschaft break-before ersetzt. Diese neue Eigenschaft behandelt auch Spalten- und Regionsumbrüche und ist syntaktisch mit page-break-before kompatibel. Prüfen Sie daher vor der Verwendung von page-break-before, ob Sie stattdessen break-before verwenden können.
Ein häufiger Anwendungsfall dafür ist die Anwendung auf den Selektor #comments, damit ein Benutzer, der eine Seite mit Kommentaren druckt, leicht wählen kann, das gesamte Dokument zu drucken, aber sauber vor den Kommentaren aufhört.
page-break-after
Die Eigenschaft page-break-after fügt einen Seitenumbruch nach dem Element ein, auf das sie angewendet wird.
Hinweis: Diese Eigenschaft wird derzeit durch die allgemeinere Eigenschaft break-after ersetzt. Diese neue Eigenschaft behandelt auch Spalten- und Regionsumbrüche und ist syntaktisch mit page-break-after kompatibel. Prüfen Sie daher vor der Verwendung von page-break-after, ob Sie stattdessen break-after verwenden können.
page-break-inside
Die Eigenschaft page-break-inside fügt einen Seitenumbruch innerhalb des Elements ein, 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 Werte left und right für page-break-before und page-break-after beziehen sich auf ein Seitenlayout (wie ein Buch), bei dem es separate linke und rechte Seiten gibt. Sie funktionieren so:
lefterzwingt einen oder zwei Seitenumbrüche nach dem Element, sodass die nächste Seite als linke Seite formatiert wird.righterzwingt einen oder zwei Seitenumbrüche nach dem Element, sodass die nächste Seite als rechte Seite formatiert wird.
Betrachten Sie always als eine Mischung aus beidem. Die Spezifikation besagt:
Ein konformer User-Agent kann die Werte 'left' und 'right' als 'always' interpretieren.
Beispiel
@media print {
h2 {
page-break-before: always;
}
h3, h4 {
page-break-after: avoid;
}
pre, blockquote {
page-break-inside: avoid;
}
}Dieser Code-Schnipsel erledigt 3 Dinge:
- er erzwingt einen Seitenumbruch vor allen
h2-Überschriften (vielleicht sind h2-Tags in Ihrem Dokument Kapitelüberschriften, die eine neue Seite verdienen) - er verhindert Seitenumbrüche direkt nach Unterüberschriften, da dies seltsam aussieht
- er verhindert Seitenumbrüche innerhalb von
pre-Tags und BlockZitat-Elementen
Verwandte Eigenschaften
Weitere Ressourcen
- Seitenbezogene Eigenschaften in den CSS-Spezifikationen
- break-before und page-break-before bei MDN
- break-after und page-break-after bei MDN
- page-break-inside bei MDN
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | Alle | Alle | 7+ | 4+ | TBD | TBD |
Sie können von mobilen Geräten aus drucken, wie z. B. AirPrint auf iOS, aber wir haben dies nicht viel getestet. Wenn jemand Daten zur Unterstützung hat, lassen Sie es uns wissen.
Großartig. Ich wollte schon seit einiger Zeit etwas Ähnliches tun. Ich mochte es nie, mitten in bestimmten Abschnitten zu brechen, besonders wenn Daten auf der nächsten Seite verwaist werden!
Sehr hilfreich! Danke!
Du bist großartig, danke
Ich sehe nicht, dass "page-break-inside" in irgendeinem Browser funktioniert, geschweige denn in den meisten großen Browsern. Können Sie bitte eine Demoseite bereitstellen?
Danke!
Safari 7 unter OS X unterstützt leider
page-break-after: avoidanscheinend nicht. Ich habe einen Header mit einem Absatz getestet, aber sie wurden an der Seitenbegrenzung getrennt.Etwas hat sich geändert. page-break-before: always; funktioniert nicht mehr in Chrome oder Safari. Firefox respektiert es jedoch.
page-break-inside:avoid;
Das funktioniert. in Chrome, Firefox und Safari.
page-break-inside:avoid; funktioniert nicht nur, sondern scheint auch die nützlichste der Optionen zu sein!
Ich habe die Option "auto" an mehreren Stellen gesehen, aber niemand erklärt jemals, was sie tun soll.
page-break-inside:avoid ist ein Lebensretter!
Hallo,
Ich frage mich, ob es möglich wäre, die Seitenumbrüche wie folgt zu dekorieren:
Angenommen, ich habe einen Absatz, bei dem ich einen Seitenumbruch vermeiden möchte. Also setze ich
page-break-inside : avoid, wie Sie erwähnt haben. Aber für einige Geräte ist es nicht möglich, den Umbruch zu vermeiden. Wäre es in diesem Fall möglich, eine Art Dekoration zu verwenden, um anzuzeigen, dass der Seitenumbruch innerhalb eines solchen Absatzes stattgefunden hat? Sagen wir, wenn der Umbruch stattfindet, möchte ich ein rechtsbündiges ➜ hinzufügen, um die Fortsetzung des Absatzes anzuzeigen.Para Chrome empfehle ich die Verwendung von
-webkit-column-break-after
-webkit-column-break-after funktioniert auch nicht in Chrome
-webkit-column-break-after existiert nicht für Chrome.
Sehr großartig, sehr hilfreich – danke!
Ich habe eine Tabelle mit vielen Spalten und muss sie in ein PDF exportieren. Ich möchte die Tabelle Spalte für Spalte. So zeigt die erste Seite die ersten 4 Spalten, dann die nächste Seite die nächsten 4. Sobald alle Spalten angezeigt sind, sollten mehr Zeilen angezeigt werden, beginnend mit den ersten Spalten.
page-break-inside:avoid
Sehr hilfreich unter Firefox! Danke!
aber einige Probleme mit Chrome und IE
gleiches Problem mit
-webkit-column-break-inside: avoid
break-inside: avoid
Äußerst hilfreiches Skript – es hat mich aus einer Patsche geholfen. Danke.
Keine dieser funktioniert mehr in Chrome und Safari.
left und right verhalten sich in den meisten Browsern wie immer.
Das funktioniert hervorragend, aber ich habe ein Szenario, in dem der Inhalt auf eine zweite Seite überläuft und der Seitenumbruch ignoriert wird. Die nachfolgenden Umbrüche funktionieren alle… nur nicht der Umbruch, bei dem der Inhalt auf die nächste Seite überläuft. Gedanken?
Also würde das Beispiel mit always-pagebreak-before H2,
eine H1-Überschrift ganz allein auf einer Seite hinterlassen?
Wie vermeidet man das?
Sie könnten die erste H2 nach H1 mit h2:first-child ansprechen.
Das ist großartig, aber ich habe ein Problem: Wenn ich "page-break-after:always" verwende, wird eine leere Seite hinzugefügt. Können Sie mir bitte helfen, diese leere Seite zu entfernen?
Ich versuche, ein funktionierendes Beispiel dafür zu bekommen. Hat es sich überhaupt geändert? http://s.codepen.io/sheriffderek/debug/AXkNWq Bisher kein Glück.
Weiß jemand, ob diese Eigenschaften mit HTML-E-Mails funktionieren? Oder hängt die Unterstützung vom Client ab, in dem eine Nachricht angezeigt wird?
In meinen Tests funktioniert page-break-inside: avoid gut in Gmail, Yahoo und sogar Outlook Office. Aber weder page-break-before:avoid noch page-break-after:avoid funktionieren in diesen Clients. page-break-before:always funktioniert manchmal.
Hallo, ich möchte nach einer Tabelle einen Seitenumbruch in PDF einfügen. Ich verwende dieses Seitenumbruchkonzept, aber es wird mir nicht unterstützt.
Bitte helfen Sie mir dabei…
Hey Preeti,
Haben Sie versucht, in unseren Foren nachzufragen? Viele Leute aus der Community sind dort unterwegs und beantworten oft Fragen.
Prost!
Ich habe eine Anforderung, bei der ein PDF OHNE SEITENUMBRUCH generiert werden muss. Gibt es eine Möglichkeit, dies in CSS zu handhaben?
Meine Seite hat viele Inhalte, darunter Diagramme/Tabellen mit einer Bildlaufleiste für die gesamte Seite.
Ich persönlich verwende FPDF http://www.fpdf.org/, um PDF-Seiten dynamisch zu generieren. Sie können damit die Seitenhöhe für die entsprechende Inhaltsmenge einstellen, was den Effekt eines "NO PAGE BREAK PDF" hätte.
#besserspätalsnie
page-break-inside: avoid
Das bedeutet, dass Seitenumbrüche innerhalb des Elements mit dieser Eigenschaft vermieden werden. Wenn Sie also ein Wrapper-Element haben und diese Eigenschaft hinzufügen, werden keine Seitenumbrüche innerhalb angezeigt.
Ich hoffe, das hat geholfen.
Welche Elemente unterstützen dieses Attribut? Ich sehe, dass es bei Absätzen und Überschriften funktioniert, aber nicht bei Divs (in Chrome).
Ich habe das Div zum Drucken zusammen mit seinem Eltern-Div als Block, Float auf none gesetzt !important, page-break-before und page-break-after auf always gesetzt. – Ich erhalte immer noch keinen Seitenumbruch beim Drucken. Was kann ich noch tun? – Jede Hilfe ist sehr willkommen!
Seitenumbruch funktioniert nicht mit gefloateten Elementen. Sie müssen ein Element haben, das nicht gefloatet ist, und die Eigenschaft darauf anwenden. Dann funktioniert es gut.
Gibt es eine Methode, Seitenumbrüche nur beim Drucken im
Querformatim Browser-Druckdialog zu haben? Ich habe eine<table>, die sich nur im Querformat stapelt/überlappt?Ja, wenn Sie eine Klasse für Druck oder PDF haben, dann wird eine andere Klasse für Seitenumbrüche unter dieser nur beim Drucken angewendet.
Zum Beispiel. Nehmen wir an, Sie haben eine .PDF-Klasse, die Sie auf den Body anwenden, wenn Sie etwas drucken. Sie können auch eine .landscape-Klasse und eine .pageBreak-Klasse haben, die Sie auf die Elemente anwenden, bei denen Sie einen Seitenumbruch wünschen. Wenn Sie diese Klasse unter der .PDF-Klasse platzieren, wird sie nur beim Drucken angewendet. Machen Sie dasselbe mit .landscape.
// wird nur beim Drucken angewendet (Generierung eines PDFs)
.PDF .pageBreak {
page-break-after: always;
}
// wird nur im Querformat angewendet
.landscape .pageBreak {
page-break-after: always;
}