Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >break-inside

break-inside

break-inside: auto | avoid | avoid-column | avoid-page

Sagt dem Browser, ob er ein Element dort teilen darf, wo eine Spalte (columns) oder eine Druckseite endet. Mit dem Wert avoid wandert eine Karte, ein Bild mit Bildunterschrift oder eine Tabelle als Ganzes in die nächste Spalte oder auf die nächste Seite, statt in der Mitte durchgeschnitten zu werden.

Werte

  • auto – das Element darf geteilt werden.
  • avoid – nicht zwischen Spalten oder Seiten teilen.
  • avoid-column – nur zwischen Spalten; avoid-page – nur zwischen Seiten. Beide in Firefox erst ab 92.

Initialwert: auto. Vererbt: nein. Gilt für: Blockelemente im normalen Fluss innerhalb von Spalten oder einer Druckseite.

Beispiele

Karten in zwei Spalten – keine davon wird zwischen den Spalten geteilt:

<div class="cards">
  <div class="card">Karte 1 – ein kurzer Text.</div>
  <div class="card">Karte 2 – ein längerer Text, der mehr Zeilen einnimmt und ohne break-inside geteilt werden könnte.</div>
  <div class="card">Karte 3 – ein kurzer Text.</div>
</div>

.cards {
  columns: 2;
  column-gap: 12px;
  max-width: 360px;
}
.card {
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 8px;
  background: #e3f2fd;
}
Ergebnis
Karte 1 – ein kurzer Text.
Karte 2 – ein längerer Text, der mehr Zeilen einnimmt und ohne break-inside geteilt werden könnte.
Karte 3 – ein kurzer Text.

Beim Druck Tabellen und Bilder mit Bildunterschrift nicht teilen:

<figure>
  <img src="/img/slider.jpg" alt="Beispiel">
  <figcaption>Ein Bild mit Bildunterschrift bleibt auf einer Seite.</figcaption>
</figure>

@media print {
  table, figure { break-inside: avoid; }
}

Das Ergebnis: Am Bildschirm ändert sich nichts. Beim Druck wandert ein Bild, das am Ende einer Seite nicht mehr ganz Platz hätte, zusammen mit seiner Bildunterschrift auf die nächste Seite.

Worauf Sie achten sollten

  • avoid ist nur ein Wunsch: Ein Element, das höher als eine Spalte oder eine Seite ist, wird trotzdem geteilt.
  • Browser kennen noch das ältere page-break-inside: avoid als weiteren Namen derselben Eigenschaft.
  • Für einen Seitenumbruch vor oder nach einem Element gibt es die Eigenschaften break-before und break-after (break-before: page beginnt eine Überschrift auf einer neuen Seite).

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit Januar 2019, gilt als weithin verfügbar seit Juli 2021. Ab Version: Chrome 50, Firefox 65, Safari 10. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
columns
column-count
@page
@media
display