Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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 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
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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

Kompatibilität in mehrspaltigen Layouts

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Multi-column LayoutChrome Vollständige Unterstützung 50Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 65IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 37
Vollständige Unterstützung 37
Keine Unterstützung 11.1 — 12.1
Safari Vollständige Unterstützung 10WebView Android Vollständige Unterstützung 50Chrome Android Vollständige Unterstützung 50Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 65Opera Android Vollständige Unterstützung 37
Vollständige Unterstützung 37
Keine Unterstützung 11.1 — 12.1
Safari iOS Vollständige Unterstützung 10Samsung Internet Android Vollständige Unterstützung 5.0
column and avoid-columnChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Keine Unterstützung NeinIE Vollständige Unterstützung 10Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung 12Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Kompatibilität in seitenbasierten Layouts

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Supported in Paged MediaChrome Vollständige Unterstützung 50Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 65IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 37
Vollständige Unterstützung 37
Keine Unterstützung 11.1 — 12.1
Safari Vollständige Unterstützung 10WebView Android Vollständige Unterstützung 50Chrome Android Vollständige Unterstützung 50Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 65Opera Android Vollständige Unterstützung 37
Vollständige Unterstützung 37
Keine Unterstützung 11.1 — 12.1
Safari iOS Vollständige Unterstützung 10Samsung Internet Android Vollständige Unterstützung 5.0
page and avoid-pageChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Keine Unterstützung 11.1 — 12.1Safari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung 12Firefox Android Keine Unterstützung NeinOpera Android ? Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

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.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: tonra
Zuletzt aktualisiert von: tonra,