page-break-before CSS property
Deprecated
Avoid using this feature in new projects.
The page-break- alias properties exist only for backwards compatibility with pages that predate the break- properties.
This feature may be a candidate for removal from web standards or browsers.
Consider using the following features instead: Page breaks.
Warnung:
Diese Eigenschaft wurde durch die break-before-Eigenschaft ersetzt.
Die page-break-before CSS-Eigenschaft passt Seitenumbrüche vor dem aktuellen Element an.
Diese Eigenschaft gilt für Block-Elemente, die eine Box erzeugen. Sie gilt nicht für ein leeres <div>, das keine Box erzeugt.
Probieren Sie es aus
page-break-before: auto;
page-break-before: 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-before'</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-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;
/* Global values */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;
Werte
Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:
auto-
Standardwert. Automatische Seitenumbrüche (weder erzwungen noch verboten).
always-
Erzwingt immer Seitenumbrüche vor dem Element.
avoid-
Vermeidet Seitenumbrüche vor dem Element.
left-
Erzwingt Seitenumbrüche vor dem Element, so dass die nächste Seite als linke Seite formatiert wird. Es ist die Seite, die auf der linken Seite des Buchrückens oder der Rückseite der Seite beim Duplexdruck platziert wird.
right-
Erzwingt Seitenumbrüche vor dem Element, so dass die nächste Seite als rechte Seite formatiert wird. Es ist die Seite, die auf der rechten Seite des Buchrückens oder der Vorderseite der Seite beim Duplexdruck platziert wird.
recto-
Wenn die Seiten von links nach rechts fortschreiten, wirkt dies wie
right. Wenn die Seiten von rechts nach links fortschreiten, wirkt dies wieleft. verso-
Wenn die Seiten von links nach rechts fortschreiten, wirkt dies wie
left. Wenn die Seiten von rechts nach links fortschreiten, wirkt dies wieright.
Seitenumbruch-Aliasse
Die Eigenschaft page-break-before ist nun eine veraltete Eigenschaft, die durch break-before ersetzt wurde.
Aus Kompatibilitätsgründen sollte page-break-before von Browsern als Alias von break-before behandelt werden. Dies stellt sicher, dass Websites, die page-break-before verwenden, weiterhin wie vorgesehen funktionieren. Ein Unterset von Werten sollte wie folgt als Aliasse behandelt werden:
| page-break-before | break-before |
|---|---|
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-before =
auto |
always |
avoid |
left |
right |
inherit
Beispiele
Vermeiden eines Seitenumbruchs vor einem Element
/* Avoid page break before div elements of class note */
div.note {
page-break-before: avoid;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Logical Properties and Values Module Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |