page-break-inside 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-inside-Eigenschaft ersetzt.
Die page-break-inside CSS Eigenschaft passt Seitenumbrüche innerhalb des aktuellen Elements an.
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 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-inside'</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;
}
@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
Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:
Seitenumbruch-Aliase
Die page-break-inside-Eigenschaft ist jetzt eine veraltete Eigenschaft, die durch break-inside ersetzt wurde.
Aus Kompatibilitätsgründen sollte page-break-inside von Browsern als Alias von break-inside behandelt werden. Dies stellt sicher, dass Websites, die page-break-inside verwenden, weiterhin wie vorgesehen funktionieren. Ein Teil der Werte sollte wie folgt aliasisiert 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 wie table-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 class="page">
<p>This is the first paragraph.</p>
<section class="list">
<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
| Spezifikation |
|---|
| CSS Fragmentation Module Level 3 # page-break-properties |