CSS break-inside-Eigenschaft

Definition und Verwendung

Das Attribut break-inside legt fest, ob im angegebenen Element eine Seitenaufteilung (page-break), Spaltenaufteilung (column-break) oder Berechnung (region-break) erfolgen soll.

Das Attribut break-inside erweitert das page-break-inside-Attribut von CSS2.

Durch die Verwendung von break-inside können Sie dem Browser mitteilen, dass in Bildern, Code-Snippets, Tabellen und Listen keine Unterbrechungen erfolgen sollen.

Beispiel

Vermeiden Sie die Seitenaufteilung innerhalb des <img>-Elements:

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

CSS-Syntax

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Attributswert

Wert Beschreibung
auto Standard. Führen Sie die Seitenaufteilung, Spaltenaufteilung und Berechnung innerhalb des Elements automatisch durch.
avoid Vermeiden Sie die Aufteilung in Seiten, Spalten und Bereiche innerhalb des Elements.
avoid-column Vermeiden Sie die Spaltenaufteilung innerhalb des Elements.
avoid-page Vermeiden Sie die Seitenaufteilung innerhalb des Elements.
avoid-region Vermeiden Sie die Aufteilung innerhalb des Elements.
initial Setzen Sie dieses Attribut auf seinen Standardwert. Siehe initial。
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit。

Technische Details

Standardwert: auto
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Attribute zur Animation。
Version: CSS3
JavaScript-Syntax: object.style.breakInside="always"

Mehr Beispiele

Vermeiden Sie die Seitenaufteilung innerhalb der <table>、<ul>、<ol>-Elemente:

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

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0