CSS page-break-Eigenschaft
Tatsächlich gibt es in der CSS-Spezifikation keine page-break-Eigenschaft. Es handelt sich um eine Gruppe von drei Eigenschaften: page-break-inside, page-break-before und page-break-after. Diese Eigenschaften definieren das Verhalten des Dokuments beim Drucken. Keine von ihnen kann auf einem leeren <div> oder auf absolut positionierten Elementen verwendet werden.
page-break-after
Die Eigenschaft page-break-after definiert einen Seitenumbruch nach dem Element.
WARNING
Die Eigenschaft page-break-after wurde durch die Eigenschaft break-after ersetzt.
Verwenden Sie das folgende Codebeispiel, um einen Seitenumbruch nach dem Element zu definieren:
CSS page-break-after code example
@media print {
footer {
page-break-after: left;
/* modern equivalent: break-after: left; */
}
}page-break-before
Die Eigenschaft page-break-before definiert einen Seitenumbruch vor dem Element.
WARNING
Die Eigenschaft page-break-before wurde durch die Eigenschaft break-before ersetzt.
Verwenden Sie das folgende Codebeispiel, um einen Seitenumbruch vor dem Element zu definieren:
CSS page-break-before code example|W3Docs
@media print {
h2 {
page-break-before: right;
/* modern equivalent: break-before: right; */
}
}page-break-inside
Die Eigenschaft page-break-inside definiert den Seitenumbruch innerhalb des Elements.
WARNING
Die Eigenschaft page-break-inside wurde durch die Eigenschaft break-inside ersetzt.
Beispiel zur Eigenschaft break-inside:
Das folgende Beispiel verwendet die moderne Eigenschaft break-inside, die die veraltete page-break-inside ersetzt.
CSS page-break and break-inside properties example|W3Docs
<!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 {
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>
<h2>Page-break property example</h2>
<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 | Automatischer Seitenumbruch. Dies ist der Standardwert. |
| always | Erzwingt immer einen Seitenumbruch nach dem Element. |
| avoid | Vermeidet einen Seitenumbruch nach dem Element. |
| left | Erzwingt einen Seitenumbruch nach dem Element, sodass die folgende Seite als linke Seite formatiert wird. |
| right | Erzwingt einen Seitenumbruch nach dem Element, sodass die folgende Seite als rechte Seite formatiert wird. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Hinweis: Die Werte always, left und right gelten nur für page-break-before und page-break-after. page-break-inside akzeptiert nur auto und avoid.
Praxis
Welche Funktion hat die Eigenschaft 'page-break' in CSS?