W3docs
de
Anmelden

CSS break-inside Eigenschaft

Die CSS break-inside Eigenschaft legt fest, ob ein Umbruch innerhalb der Hauptbox erlaubt, vermieden oder erzwungen wird. Mit Beispielen erklärt.

Die CSS-Eigenschaft break-inside steuert, ob ein Fragmentierungsumbruch (ein Seiten-, Spalten- oder Regionsumbruch) innerhalb der Box eines Elements erlaubt ist. Verwende sie, um Inhalte zusammenzuhalten, damit sie nicht auf zwei gedruckte Seiten oder zwei Spalten eines mehrspaltige Layouts aufgeteilt werden.

Ein häufiges, praktisches Beispiel: In einem mehrspaltigen Artikel soll eine Abbildung, ein Code-Block oder eine Überschrift mit dem ersten Absatz nicht zerrissen werden, sodass eine Hälfte in einer Spalte und die andere in der nächsten landet. Wenn du break-inside: avoid für dieses Element setzt, weist du den Browser an, die gesamte Box in die nächste Spalte oder Seite zu verschieben, anstatt sie aufzuteilen.

Diese Eigenschaft gilt nur in fragmentierten Kontexten – also dann, wenn Inhalte tatsächlich über Fragmente fließen:

  • Druck (@media print), wo Inhalte auf mehrere Seiten aufgeteilt werden.
  • Mehrspaltige Layouts, bei denen Inhalte über Spalten fließen (siehe column-count).
  • CSS-Regionen (der Wert avoid-region), eine ältere Spezifikation mit sehr eingeschränkter Unterstützung.

Wenn Inhalte nicht fragmentiert sind (ein normaler Block auf dem Bildschirm), hat break-inside keine sichtbare Wirkung.

Jede Elementgrenze wird durch drei verwandte Eigenschaften gesteuert:

  • Break-after, die auf das vorausgehende Element angewendet wird.
  • Break-before, die auf das nachfolgende Element angewendet wird.
  • Break-inside, die auf das umschließende Element angewendet wird.

Die CSS-Fragmentierungsspezifikation behandelt das Umbruchverhalten wie folgt:

  1. Erzwungene Umbrüche (z. B. always, left, right), die durch break-before oder break-after angegeben werden, haben Vorrang und werden ausgeführt.
  2. Wird kein erzwungener Umbruch ausgelöst, bestimmt break-inside, ob der Browser versucht, einen Umbruch innerhalb des Elements zu vermeiden. Das Setzen auf avoid verhindert Seiten-, Spalten- oder Regionsumbrüche innerhalb der Box.
Initialwertauto
Gilt fürElemente auf Blockebene.
VererbtNein.
AnimierbarDiskret.
VersionCSS3
DOM-Syntaxobject.style.breakInside = "avoid";

Syntax

Syntax der CSS break-inside Eigenschaft

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

Beispiel der break-inside Eigenschaft:

Beispiel der CSS break-inside Eigenschaft mit dem Wert avoid

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        /* Safari and Chrome */
        -webkit-column-count: 3;
        -webkit-column-rule: 2px dotted #ccc;
        /* Firefox */
        -moz-column-count: 3;
        -moz-column-rule: 2px dotted #ccc;
        /* CSS3 */
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS break-inside Eigenschaft](https://api.w3docs.com/uploads/media/default/0001/03/e03a2e39ef51e5dd859aa1ab137e06e33638a3ba.png "CSS break-inside Eigenschaft" =420x)

Im obigen Beispiel enthält jede der drei Spalten eine Überschrift und einen Absatz, und das <hr>-Element trägt break-inside: avoid, sodass die Trennlinie niemals zwischen Spalten aufgeteilt wird.

Werte

WertBeschreibung
autoStandard. Erlaubt normale Seiten-, Spalten- oder Regionsumbrüche innerhalb des Elements.
avoidVermeidet jeden Seiten-, Spalten- oder Regionsumbruch innerhalb des Elements.
avoid-pageVermeidet einen Seitenumbruch innerhalb des Elements.
avoid-columnVermeidet einen Spaltenumbruch innerhalb des Elements.
avoid-regionVermeidet einen Regionsumbruch innerhalb des Elements.
initialSetzt die Eigenschaft auf ihren Standardwert (auto).
inheritErbt die Eigenschaft vom übergeordneten Element.

Browser-Unterstützung

break-inside mit den Werten auto und avoid wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Die Schlüsselwörter avoid-page und avoid-column haben eine ungleichmäßigere Unterstützung, und avoid-region wird praktisch nicht unterstützt, da CSS Regions nie weit verbreitet eingeführt wurde. Für zuverlässige, browserübergreifende Ergebnisse bevorzuge break-inside: avoid.

In druckbezogenem Code siehst du möglicherweise noch die ältere Eigenschaft page-break-inside: avoid;. Sie ist das Legacy-Äquivalent von break-inside: avoid und wird aus Gründen der Abwärtskompatibilität beibehalten. Daher ist es üblich, beide zu deklarieren:

.keep-together {
  page-break-inside: avoid; /* legacy */
  break-inside: avoid;      /* modern */
}

Übungen

Übung
Was macht die CSS-Eigenschaft 'break-inside'?
Was macht die CSS-Eigenschaft 'break-inside'?
Was this page helpful?