CSS break-before-Eigenschaft

Die break-before-Eigenschaft definiert, wie Seiten- oder Spaltenumbrüche vor der generierten Box behandelt werden sollen. Falls das Element keine Box generiert, hat die Eigenschaft keine Auswirkung. Sie unterstützt Werte wie auto, avoid, always, page, column, left und right.

Die page-break-inside, page-break-after und page-break-before Eigenschaften helfen zu definieren, wie ein Dokument beim Drucken aussehen soll.

Wenn mehrere Umbruch-Eigenschaften auf dasselbe Element angewendet werden, haben erzwungene Umbrüche (page, column, left, right, always) Vorrang vor Umbrüchen, die vermieden werden sollen. Die Eigenschaft break-before gilt für das Element selbst, während break-inside für dessen Hauptbox gilt.

Anfangswert	auto
Anwendbar auf	Block-Elemente.
Vererbbar	Nein.
Animierbar	Diskret.
Version	CSS3
DOM-Syntax	object.style.breakBefore = "auto";

Syntax

Syntax der CSS break-before-Eigenschaft

css

break-before: auto | avoid | always | page | column | left | right | initial | inherit;

Beispiel zur break-before-Eigenschaft:

Beispiel zur CSS break-before-Eigenschaft mit dem Wert avoid

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

Werte der CSS break-before-Eigenschaft

Werte

Wert	Beschreibung
auto	Standard. Erlaubt beliebige Umbrüche vor der Hauptbox.
avoid	Vermeidet beliebige Umbrüche vor der Hauptbox.
always	Erzwingt einen Umbruch vor der Hauptbox.
page	Erzwingt einen Seitenumbruch vor der Hauptbox.
column	Erzwingt einen Spaltenumbruch vor der Hauptbox.
left	Erzwingt einen oder zwei Seitenumbrüche vor der Hauptbox, sodass die nächste Seite als linke Seite formatiert wird.
right	Erzwingt einen oder zwei Seitenumbrüche vor der Hauptbox, sodass die nächste Seite als rechte Seite formatiert wird.
initial	Setzt diese Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt diese Eigenschaft von ihrem übergeordneten Element.

Praxis

Was bewirkt die CSS-Eigenschaft 'break-before'?

Sie erzeugt einen Umbruch vor einem Element.Sie ändert die Farbe eines Elements.Sie erzeugt einen Umbruch nach einem Element.Sie beeinflusst Seiten-, Spalten- oder Regionsumbrüche vor der Generierung eines Elements.Sie verändert die Form eines Elements.

CSS break-before-Eigenschaft ​

Syntax ​

Beispiel zur break-before-Eigenschaft: ​

Ergebnis ​