CSS-Eigenschaft: page-break-inside, Kategorien: Druckausgabe (allgemein), Paged media (CSS 2.1), Paged Media (CSS 3)
Seitenumbruch verhindern
Steuert, ob beim Ausdruck einer Webseite ein Seitenumbruch innerhalb eines Block-Elements verhindert wird.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Seitenumbruch verhindern |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Druckausgabe (allgemein), Paged media (CSS 2.1), Paged Media (CSS 3):
- image-orientation
- object-position
- orphans
- page
- page-break-after
- page-break-before
- Aktuelle Seite: page-break-inside
- size
- widows
Folgendes ist beim Einsatz von page-break-inside zu beachten:
- page-break-inside bezieht sich auf den Ausdruck einer Seite und hat nichts mit der Darstellung im Browser zu tun.
- Falls der Wert auf avoid gesetzt ist, wird ein Seitenumbruch innerhalb des betreffenden Block-Elements verhindert.
- Wird vom Internet Explorer ab Version 8 und Opera ab Version 5 unterstützt, Firefox, Safari und Chrome ignorieren die Anweisung (vergleiche auch mäßige Unterstützung von widows und orphans).
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| |||||||||||||||||
Weiterführende Informationen zu page-break-inside:
- W3C Spezifikation:
http://www.w3.org/TR/CSS2/page.html#propdef-page-break-after
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
page-break-before - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
page-policy
Beispiele
HTML:
<div id="example-1">PROP</div>CSS:
div {
border: 4px solid #cccccc;
padding: 10px;
}
#example-1 {
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div id="example-2">PROP</div>CSS:
#example-2 {
}Beispiel Nr. 2 So sieht's aus:
HTML:
<div id="example-3">PROP</div>CSS:
#example-3 {
}Beispiel Nr. 3 So sieht's aus:
HTML:
<div id="example-4">PROP</div>CSS:
#example-4 {
}Beispiel Nr. 4 So sieht's aus:
HTML:
<div id="example-5">PROP</div>CSS:
#example-5 {
}Beispiel Nr. 5 So sieht's aus:
HTML:
<div id="example-6">PROP</div>CSS:
#example-6 {
}Beispiel Nr. 6 So sieht's aus:
HTML:
<div id="testcase-vendor">PROP</div>CSS:
#testcase-vendor {
-moz-text-align-last: right;
-webkit-marquee-repetition: right;
-o-text-align-last: right;
-ms-text-align-last: right;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
HTML:
<div id="testcase-standard">PROP</div>CSS:
#testcase-standard {
text-align-last: right;
}Testbeispiel: Standardschreibweise
Beispiel Nr. 9 So sieht es aus:
Die Auswirkung von page-break-inside ist erst im Ausdruck zu sehen. Deutlich wird es vor allem, wenn die Eigenschaft nicht unterstützt wird.
In der Zip-Datei ist die HTML-Datei mit dem Quelltext zu finden. Dieser hat die CSS-Anweisung von page-break-inside: avoid. Dahinter finden Sie die PDF-Ausdrucke. Dort sieht man, wie die unterschiedlichen Browser page-break-inside unterstützt.
Download:
- HTML-Quelltext für das page-break-inside-Beispiel (ZIP)
- page-break-inside - Ausdruck im Chrome 14 (PDF)
- page-break-inside - Ausdruck im Firefox 6.0.2 (PDF)
- page-break-inside - Ausdruck im Internet Explorer 8 (PDF)
- page-break-inside - Ausdruck im Opera 11.51 (PDF)
- page-break-inside - Ausdruck im Safari 5.1 (Windows - PDF)
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!