CSS page-break-inside-Eigenschaft

Die page-break-inside-Eigenschaft steuert, ob ein Seitenumbruch innerhalb eines Elements stattfindet. Diese Eigenschaft wird in der Regel verwendet, um Seitenumbrüche innerhalb des Inhalts eines Elements beim Drucken zu verwalten. Beachten Sie, dass sie nur in paged Media-Kontexten (Seitenmedien) gilt und keine Auswirkung auf die Bildschirmdarstellung hat.

WARNING

Die page-break-inside-Eigenschaft wurde durch die break-inside-Eigenschaft ersetzt. Moderne Alternativen sind avoid-page und avoid-column für eine feinere Steuerung von Seiten- und Spaltenumbrüchen.

Browser behandeln die page-break-inside-Eigenschaft als Alias für break-inside. Dies stellt sicher, dass Websites, die die page-break-inside-Eigenschaft verwenden, weiterhin wie beabsichtigt funktionieren.

Anfangswert	auto
Anwendbar auf	Block-Elemente.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS2
DOM-Syntax	`object.style.pageBreakInside = "avoid";`

Syntax

CSS page-break-inside Syntax

css

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

Das folgende Codebeispiel zeigt die Verwendung der page-break-inside-Eigenschaft:

CSS page-break-inside Code

css

@media print {
  p {
    page-break-inside: auto;
  }
}

Beispiel für die `page-break-inside`-Eigenschaft mit dem Wert `avoid`:

Die einzelnen Teile der Seite

html

<!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>

Try it Yourself »

Beispiel für die `page-break-inside`-Eigenschaft mit dem Wert `auto`:

Beispiel für die page-break-inside-Eigenschaft mit dem Wert „auto“:

html

<!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>

Try it Yourself »

Werte

Wert	Beschreibung
auto	Erlaubt Seitenumbrüche innerhalb des Elements.
avoid	Vermeidet Seitenumbrüche innerhalb des Elements.

Practice

Was bewirkt die CSS-Eigenschaft 'page-break-inside'?

Es passt das Verhalten des Seitenumbruchs innerhalb einer Box an.Es legt fest, wie Textzeilen innerhalb einer Box umgebrochen werden.Es wird verwendet, um nach einem HTML-Element einen Umbruch auf der Seite zu erzwingen.Es wird verwendet, um einen Umbruch innerhalb eines Elements zu verhindern.Es fügt einen Rahmen innerhalb des Elements hinzu.

CSS page-break-inside-Eigenschaft ​

Syntax ​

Beispiel für die page-break-inside-Eigenschaft mit dem Wert avoid: ​

Beispiel für die page-break-inside-Eigenschaft mit dem Wert auto: ​