page-break-before
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-before-Eigenschaft ersetzt.
Die page-break-before CSS-Eigenschaft passt Seitenumbrüche vor dem aktuellen Element an.
Diese Eigenschaft wird auf Blockelemente angewendet, die ein Box-Modell erzeugen. Sie wird nicht auf ein leeres <div> angewendet, das kein Box-Modell 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
auto-
Ursprünglicher Wert. 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, sodass die nächste Seite als linke Seite formatiert wird. Es ist die Seite, die auf der linken Seite des Buchrückens liegt oder die Rückseite der Seite beim Duplexdruck.
right-
Erzwingt Seitenumbrüche vor dem Element, sodass die nächste Seite als rechte Seite formatiert wird. Es ist die Seite, die auf der rechten Seite des Buchrückens liegt oder die Vorderseite der Seite beim Duplexdruck.
recto-
Wenn sich die Seiten von links nach rechts fortsetzen, wirkt dies wie
right. Wenn sich die Seiten von rechts nach links fortsetzen, wirkt dies wieleft. verso-
Wenn sich die Seiten von links nach rechts fortsetzen, wirkt dies wie
left. Wenn sich die Seiten von rechts nach links fortsetzen, wirkt dies wieright.
Seitenumbruch-Aliase
Die page-break-before-Eigenschaft ist jetzt eine veraltete Eigenschaft, die durch break-before ersetzt wurde.
Aus Kompatibilitätsgründen sollte page-break-before von Browsern als ein Alias von break-before behandelt werden. Dies stellt sicher, dass Websites, die page-break-before verwenden, weiterhin wie vorgesehen funktionieren. Ein Teil der Werte sollte wie folgt aliasiert 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
Einen Seitenumbruch vor einem Element vermeiden
/* Avoid page break before div elements of class note */
div.note {
page-break-before: avoid;
}
Spezifikationen
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |
Browser-Kompatibilität
Loading…