CSS-Eigenschaft break-inside

Die CSS-Eigenschaft break-inside definiert, wie sich ein Break (Seite, Spalte) innerhalb der erzeugten Box verhalten soll. Diese Eigenschaft wird ignoriert, wenn das generierte Feld nicht angegeben ist. Es hat vier Werte

Diese Eigenschaft ist veraltet.
Anfangswert auto
Gilt für Block-Eevel-Elemente
Geerbt Nein
Animierbar Diskret
Version CSS3
DOM Syntax object.style.breakInside = "avoid";

Syntax

break-inside: auto | avoid | always | all | initial | inherit;

Beispiel

<!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: column;
      }
    </style>
  </head>
  <body>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
      <hr>
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
auto Es ermöglicht das Einfügen eines beliebigen Bereichs (Seite, Spalte) vor der Hauptbox.
avoid Vermeidet es, einen Bruch vor der Hauptbox einzufügen.
always Erzwingt das Einfügen eines Bruchs vor der Hauptbox.
all Erzwingt das Einfügen eines Bruchs vor der Hauptbox.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
50.0+ 12.0+ 65.0+ 37.0+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'break-inside'?
Finden Sie das nützlich?