CSS page-break-inside Eigenschaft
Die CSS-Eigenschaft page-break-inside legt einen Seitenumbruch innerhalb eines Elements fest. Hier sind die verfügbaren Werte dieser Eigenschaft.
Die CSS-Eigenschaft page-break-inside steuert, ob ein Seitenumbruch innerhalb eines Elements erlaubt ist, wenn das Dokument gedruckt wird. Ein Seitenumbruch ist der Punkt, an dem der Inhalt auf einer gedruckten Seite endet und auf der nächsten weitergeht. Verwenden Sie diese Eigenschaft, um zu verhindern, dass ein Inhaltsblock — ein Absatz, eine Liste, eine Abbildung oder eine Tabellenzeile — auf zwei Seiten aufgeteilt wird.
Diese Eigenschaft wirkt sich nur in seitenbasierten Medien aus (Drucken, Druckvorschau oder Speichern als PDF). Auf einem normalen Bildschirm, wo Inhalte kontinuierlich gescrollt werden statt auf einzelne Seiten zu fließen, hat sie keinen sichtbaren Effekt.
Wann verwenden
Der häufigste Anwendungsfall ist page-break-inside: avoid, das den Browser anweist, ein Element auf einer einzelnen Seite zusammenzuhalten, anstatt es aufzuteilen. Typische Anwendungsfälle:
- Eine Überschrift mit dem nachfolgenden Text zusammenhalten.
- Verhindern, dass eine einzelne Liste, ein Codeblock oder ein
<figure>in der Mitte aufgeteilt wird. - Eine Tabellenzeile, Karte oder Rechnungsposition vollständig auf einer Seite behalten.
Wenn das Element höher als eine vollständige Seite ist, kann der Browser avoid nicht einhalten — der Inhalt muss irgendwo umgebrochen werden — aber er wird das Element auf einer neuen Seite beginnen, damit so viel wie möglich zusammenbleibt.
page-break-inside ist eine veraltete CSS2-Eigenschaft. Der moderne Ersatz ist break-inside, der für gedruckte Seiten, mehrspaltige Layouts und Regionen funktioniert und feinere Werte wie avoid-page und avoid-column unterstützt.
Aus Gründen der Abwärtskompatibilität behandeln Browser page-break-inside als Alias von break-inside, sodass bestehende Websites weiterhin funktionieren. Bevorzugen Sie break-inside in neuem Code.
| Anfangswert | auto |
|---|---|
| Gilt für | Block-level-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.pageBreakInside = "avoid"; |
Syntax
page-break-inside: auto | avoid | initial | inherit;Da die Eigenschaft nur beim Drucken relevant ist, wird sie üblicherweise innerhalb einer @media print-Regel platziert, damit sie das Bildschirmlayout nicht beeinflusst:
@media print {
/* Don't split tables or figures across pages */
table,
figure {
page-break-inside: avoid;
}
}Beispiele
page-break-inside mit dem Wert avoid
Hier wird für jeden Absatz, jede Liste und jeden .list-Abschnitt angefordert, auf einer Seite zu bleiben. Wenn Sie dieses Dokument drucken (oder die Druckvorschau öffnen), vermeidet der Browser es, diese Blöcke an einem Seitenumbruch aufzuteilen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
page-break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>page-break-inside mit dem Wert auto
auto ist der Anfangswert und stellt das Standardverhalten wieder her: Der Browser darf einen Seitenumbruch innerhalb des Elements einfügen, wo immer er es für nötig hält. Den Wert explizit zu setzen ist nützlich, um eine geerbte oder frühere avoid-Regel für ein bestimmtes Element zu überschreiben.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
page-break-inside: auto;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
auto | Standard. Erlaubt einen Seitenumbruch innerhalb des Elements, wenn einer benötigt wird. |
avoid | Vermeidet einen Seitenumbruch innerhalb des Elements und hält es nach Möglichkeit zusammen. |
initial | Setzt die Eigenschaft auf ihren Standardwert (auto). |
inherit | Erbt den Wert vom übergeordneten Element. |
Verwandte Eigenschaften
page-break-inside gehört zu einer Familie von Fragmentierungseigenschaften, die steuern, wo gedruckte Inhalte umgebrochen werden:
page-break-beforeundpage-break-after— erzwingen oder vermeiden einen Umbruch vor oder nach einem Element.break-insideundbreak-before— die modernen, leistungsfähigeren Ersatzeigenschaften, die auch mehrspaltige Layouts unterstützen.
Seitenumbrüche interagieren eng mit mehrspaltig en Layouts, die durch die Eigenschaften columns und column-width erstellt werden.
Browser-Unterstützung
page-break-inside wird von allen gängigen Browsern unterstützt, die Unterstützung für den Wert avoid beim Drucken war jedoch historisch gesehen inkonsistent. Für zuverlässigste Ergebnisse in neuen Projekten verwenden Sie break-inside: avoid, das Browser automatisch auf page-break-inside zurückführen.