break-inside

Die CSS-Eigenschaft break-inside gibt an, wie Seiten, Spalten oder Abschnitte innerhalb einer generierten Box umbrechen. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.

/* Spezifische Werte */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

/* Globale Werte */
break-inside: inherit;
break-inside: initial;
break-inside: unset;

Alle Begrenzungen eines Elements sind ein m├Âglicher Brechpunkt. Dieser wird von drei Eigenschaften beeinflusst:

  • Dem Wert f├╝r break-after des vorherigen Elements.
  • Dem Wert f├╝r break-before (en-US) des nachfolgenden Elements.
  • Dem Wert f├╝r break-inside des Elternelements.

Um zu ermitteln, ob ein Umbruch erfolgen muss, werden folgende Regeln angewendet:

  1. Besitzt eine der drei Eigenschaften einen forced break value (always, left, right, page, column, oder region), so hat sie Vorrang. Wenn mehrere Eigenschaften einen forced break value besitzen, gewinnt das Element, welches als letztes im Flow auftritt. Das hei├čt: break-before ├╝berwiegt break-after, welches wiederum break-inside ├╝berwiegt.
  2. Besitzt eine der drei Eigenschaften einen avoid break value (avoid, avoid-page, avoid-region, or avoid-column), so erfolgt kein Umbruch.

Nachdem erzwungene Umbr├╝che gemacht wurden, werden bei Bedarf weiche Umbr├╝che hinzugef├╝gt. Davon ausgenommen sind Elementbegrenzungen, f├╝r die der Wert avoid gilt.

Initialwertauto
Anwendbar aufBlocklevel Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Syntax

Die break-inside-Eigenschaft wird durch einen der folgenden Werte spezifiziert.

Werte

auto
Initialwert. Erlaubt jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box, erzwingt ihn aber nicht.
avoid
Vermeidet jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box.
avoid-page
Vermeidet Seitenumbr├╝che innerhalb der Box.
avoid-column
Vermeidet Spaltenumbr├╝che innerhalb der Box.
avoid-region This is an experimental API that should not be used in production code.
Vermeidet Regionsumbr├╝che innerhalb der Box.

Formale Syntax

auto | avoid | avoid-page | avoid-column | avoid-region

Page-break-Aliasse

Aus Gr├╝nden der Kompatibilit├Ąt soll die veraltete Eigenschaft page-break-inside von Browsern als ein Alias f├╝r break-inside behandelt werden. So wird sichergestellt, dass Projekte mit page-break-inside sich weiterhin wie konzipiert verhalten. F├╝r folgende Werte sollen die aufgef├╝hrten Aliasse gelten:

page-break-inside break-inside
auto auto
avoid avoid

Spezifikationen

Spezifikation Status Bemerkung
CSS Fragmentation Module Level 3
Die Definition von 'break-inside' in dieser Spezifikation.
Anw├Ąrter Empfehlung Keine ├änderungen.
CSS Regions Module Level 1
Die Definition von 'break-inside' in dieser Spezifikation.
Arbeitsentwurf Erweitert die Eigenschaft um Regionsumbr├╝che.
CSS Multi-column Layout Module
Die Definition von 'break-inside' in dieser Spezifikation.
Arbeitsentwurf Initiale Spezifikation.

Browser-Kompatibilit├Ąt

BCD tables only load in the browser

Anmerkungen zur Kompatibilit├Ąt

Vor Firefox 65 kann die veraltete page-break-inside-Eigenschaft zur Vermeidung von Spalten- und Seitenumbr├╝chen genutzt werden. Verwenden Sie f├╝r R├╝ckw├Ąrtskompatibilit├Ąt beide Eigenschaften.

F├╝r ├Ąltere WebKit-basierte Browser k├Ânnen Sie die Pr├Ąfix-Eigenschaft -webkit-column-break-inside verwenden, um Spaltenumbr├╝che zu steuern.