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>

Versuch es selber!

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.