CSS break-before Eigenschaft

Die CSS-Eigenschaft break-before steuert, ob ein Seiten-, Spalten- oder Regionsumbruch vor einem Element eingefügt werden soll. Sie ist der moderne, kontextübergreifende Ersatz für die nur beim Drucken gültige Eigenschaft page-break-before: Das gleiche Schlüsselwort funktioniert nun für Seitenmedien (Drucken/PDF), mehrspaltige Layouts (column-count) und CSS-Regionen.

Diese Seite erklärt, was break-before bewirkt, wann welcher Wert sinnvoll ist, wie die Eigenschaft mit benachbarten Umbruchregeln zusammenwirkt, und enthält ein ausführbares Beispiel.

Warum break-before wichtig ist

Zwei sehr unterschiedliche Layoutprobleme erfordern dieselbe Art von Kontrolle:

Drucken. Wenn ein langes Dokument an einen Drucker gesendet oder als PDF exportiert wird, entscheidet der Browser, wo eine Seite endet und die nächste beginnt. break-before: page ermöglicht es, einen neuen Bogen zu erzwingen — zum Beispiel, damit jedes Kapitel <h1> oben auf einer neuen Seite beginnt.
Mehrspaltentext. In einem column-count-Layout fließt der Inhalt von einer Spalte in die nächste. break-before: column zwingt eine Überschrift oder Abbildung dazu, in einer neuen Spalte zu beginnen, anstatt am Ende der vorherigen hängen zu bleiben.

Das Schlüsselwort avoid bewirkt das Gegenteil: Es weist den Browser an, keinen Umbruch direkt vor dem Element zu setzen — so lässt sich eine Überschrift mit dem darauf folgenden Absatz zusammenhalten.

Wie break-before berechnet wird

Wenn zwei benachbarte Elemente jeweils einen Umbruch anfordern (eines mit break-after, das nächste mit break-before), kombiniert der Browser beide Anforderungen und der stärkste Umbruch gewinnt:

Erzwungene Umbrüche (always, page, column, left, right) werden immer ausgeführt.
avoid ist nur ein Hinweis — der Browser kann trotzdem umbrechen, wenn er keine andere Wahl hat (zum Beispiel bei einem Element, das höher als eine einzelne Seite ist).
Wenn keine Seite einen Umbruch erzwingt, überlässt auto die Entscheidung dem Browser.

break-before wirkt sich nur auf Elemente aus, die einen Rahmen erzeugen und sich in einem Fragmentierungskontext befinden (ein gedrucktes Dokument, ein mehrspaltiger Container oder eine Region). Auf einer normalen, einspaltig angezeigten Bildschirmseite hat die Eigenschaft keinen sichtbaren Effekt.

Anfangswert	auto
Gilt für	Elemente auf Blockebene.
Vererbt	Nein.
Animierbar	Diskret.
Version	CSS3
DOM-Syntax	object.style.breakBefore = "auto";

Syntax

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

Beispiel: Umbruch in einem mehrspaltigen Layout vermeiden

Im mehrspalligen Block unten setzt das <hr> zwischen den beiden Abschnitten break-before: avoid, um den Browser anzuweisen, vor dem Trennstrich keinen neuen Spaltenumbruch zu setzen. Verkleinern Sie das Ergebnis, damit der Text in drei Spalten umbrochen wird, um den Effekt zu sehen:

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

Probier es selbst »

Ergebnis

Beispiel: Seitenumbruch beim Drucken erzwingen

Eine häufige Druckanforderung ist, jedes Kapitel auf einer eigenen Seite zu beginnen. Wenden Sie break-before: page auf die Kapitelüberschrift an — die Regel greift in der Druckvorschau (Strg/Cmd + P) oder beim Exportieren als PDF:

.chapter {
  break-before: page;
}

<h1 class="chapter">Chapter 1</h1>
<p>Intro text…</p>

<h1 class="chapter">Chapter 2</h1>
<p>This heading begins on a new printed page.</p>

Da der Umbruch nur für Seitenmedien gilt, hat er auf einem normalen scrollbaren Bildschirm keine Wirkung — öffnen Sie den Druckdialog, um ihn zu sehen.

Werte

Wert	Beschreibung
auto	Standard. Erlaubt jeden Umbruch vor dem Hauptrahmen.
avoid	Vermeidet jeden Umbruch vor dem Hauptrahmen.
always	Erzwingt einen Umbruch vor dem Hauptrahmen.
page	Erzwingt einen Seitenumbruch vor dem Hauptrahmen.
column	Erzwingt einen Spaltenumbruch vor dem Hauptrahmen.
left	Erzwingt einen oder zwei Seitenumbrüche vor dem Hauptrahmen, sodass die nächste Seite als linke Seite formatiert wird.
right	Erzwingt einen oder zwei Seitenumbrüche vor dem Hauptrahmen, sodass die nächste Seite als rechte Seite formatiert wird.
initial	Setzt diese Eigenschaft auf ihren Standardwert.
inherit	Erbt diese Eigenschaft vom übergeordneten Element.

Übung

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 einem Element.Sie verändert die Form eines Elements.