Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
page-break-inside
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 dieKompatibilitä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 diebreak-inside Eigenschaft ersetzt.
Diepage-break-insideCSS Eigenschaft ändert Seitenumbrücheinnerhalb des aktuellen Elements.
Probieren Sie es aus
page-break-inside: auto;page-break-inside: avoid;<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>Show Print Preview</button> <div> <div>Content before the property</div> <div>Content with 'page-break-inside'</div> <div>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;}@media print { #example-element { height: 25cm; }}const btn = document.getElementById("print-btn");btn.addEventListener("click", () => { window.print();});Syntax
/* Keyword values */page-break-inside: auto;page-break-inside: avoid;/* Global values */page-break-inside: inherit;page-break-inside: initial;page-break-inside: revert;page-break-inside: revert-layer;page-break-inside: unset;Werte
Alias für Seitenumbrüche
Die Eigenschaftpage-break-inside ist jetzt ein veralteter Begriff, der durchbreak-inside ersetzt wurde.
Aus Kompatibilitätsgründen solltepage-break-inside von Browsern als Alias fürbreak-inside behandelt werden. Dies stellt sicher, dass Websites, diepage-break-inside verwenden, weiterhin wie vorgesehen funktionieren. Ein Teil der Werte sollte folgendermaßen als Alias verwendet werden:
| page-break-inside | break-inside |
|---|---|
auto | auto |
avoid | avoid |
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Blocklevelelemente in normalem Fluss des Wurzelelements. User Agents können es auch auf andere Elemente wietable-row-Elemente anwenden. |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
page-break-inside =
avoid|
auto|
inherit
Beispiele
Vermeidung von Seitenumbrüchen innerhalb von Elementen
HTML
<div> <p>This is the first paragraph.</p> <section> <span>A list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>This is the second paragraph.</p> <p>This is the third paragraph, it contains more text.</p> <p> This is the fourth paragraph. It has a little bit more text than the third one. </p></div>CSS
.page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px;}.list,ol,ul,p { break-inside: avoid;}p { background-color: #8ca0ff;}ol,ul,.list { margin: 0.5em 0; display: block; background-color: orange;}p:first-child { margin-top: 0;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Fragmentation Module Level 3 # page-break-properties |