page-break-after CSS property
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Warnung:
Diese Eigenschaft wurde durch die break-after Eigenschaft ersetzt.
Die page-break-after CSS Eigenschaft passt Seitenumbrüche nach dem aktuellen Element an.
Probieren Sie es aus
page-break-after: auto;
page-break-after: always;
<div>
<p>
The effect of this property can be noticed when the document is being
printed or a preview of a print is displayed.
</p>
<button id="print-btn">Show Print Preview</button>
<div class="box-container">
<div class="box">Content before the property</div>
<div class="box" id="example-element">Content with 'page-break-after'</div>
<div class="box">Content after the property</div>
</div>
</div>
.box {
border: solid #5b6dcd 5px;
background-color: #5b6dcd;
margin: 10px 0;
padding: 5px;
}
#example-element {
border: solid 5px #ffc129;
background-color: #ffc129;
color: black;
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
Syntax
/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;
/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: revert-layer;
page-break-after: unset;
Diese Eigenschaft gilt für Block-Elemente, die eine Box erzeugen. Sie wird nicht auf ein leeres <div> angewendet, das keine Box erzeugt.
Werte
auto-
Anfangswert. Automatische Seitenumbrüche (weder erzwungen noch verboten).
always-
Erzwingen Sie stets Seitenumbrüche nach dem Element.
avoid-
Vermeiden Sie Seitenumbrüche nach dem Element.
left-
Erzwingen Sie Seitenumbrüche nach dem Element, sodass die nächste Seite als linke Seite formatiert wird. Dies ist die Seite, die auf der linken Seite des Buchrückens oder die Rückseite der Seite bei Duplexdruck platziert wird.
right-
Erzwingen Sie Seitenumbrüche nach dem Element, sodass die nächste Seite als rechte Seite formatiert wird. Dies ist die Seite, die auf der rechten Seite des Buchrückens oder die Vorderseite der Seite bei Duplexdruck platziert wird.
recto-
Wenn Seiten von links nach rechts fortschreiten, wirkt dies wie
right. Wenn Seiten von rechts nach links fortschreiten, wirkt dies wieleft. verso-
Wenn Seiten von links nach rechts fortschreiten, wirkt dies wie
left. Wenn Seiten von rechts nach links fortschreiten, wirkt dies wieright.
Seitenumbruch-Aliase
Die page-break-after Eigenschaft ist jetzt eine veraltete Eigenschaft, die durch break-after ersetzt wurde.
Aus Kompatibilitätsgründen sollte page-break-after von Browsern als Alias von break-after behandelt werden. Dies stellt sicher, dass Websites, die page-break-after verwenden, weiterhin wie gewünscht funktionieren. Ein Unterabschnitt von Werten sollte wie folgt als Alias behandelt werden:
| page-break-after | break-after |
|---|---|
auto |
auto |
left |
left |
right |
right |
avoid |
avoid |
always |
page |
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Blocklevelelemente in normalem Fluss des Wurzelelements. User Agents können es auch auf andere Elemente wie table-row-Elemente anwenden. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
page-break-after =
auto |
always |
avoid |
left |
right |
inherit
Beispiele
Einen Seitenumbruch nach Fußnoten setzen
/* move to a new page after footnotes */
div.footnotes {
page-break-after: always;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |