CSS-Eigenschaft page-break-inside

Die Eigenschaft page-break-inside definiert den Seitenumbruch innerhalb des Elements.

Diese Eigenschaft kann nicht auf ein leeres Tag <div> oder auf absolut positionierte Elemente angewendet werden.

TheDie Eigenschaft page-break-inside wird durch die Eigenschaft break-inside ersetzt.
Anfangswert auto
Gilt für Block-Level-Elemente
Geerbt Nein
Animierbar Nein
Version CSS2
DOM Syntax object.style.pageBreakInside = "Avoid";

Syntax

page-break-inside: auto | avoid | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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: 1;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <p>Der erste Absatz.</p>
      <section class="list">
        <span>Liste A</span>
        <ol>
          <li>one</li>
        </ol>
      </section>
      <ul>
        <li>one</li>
      </ul>
      <p>Der zweite Absatz.</p>
      <p>Der dritte Absatz. Es enthält einen längeren Text.</p>
      <p>Der vierte Absatz. Es hat etwas mehr Text als der dritte.</p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Ermöglicht das Einfügen eines beliebigen Seitenumbruchs innerhalb des Elements.
avoid Vermiedet, eine Seite innerhalb des Elements einzufügen.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 19.0+ 1.3+ 7.0+

Übe dein Wissen

Was bedeutet die CSS-Eigenschaft 'page-break-inside'?
Finden Sie das nützlich?