Break-before | CSS-Tricks

CSS Almanac → Eigenschaften → B → break-before

Sunkanmi Fafowora am 16. Juni 2022

Die CSS-Eigenschaft break-before ist insofern praktisch, als sie Umbrüche in paginierten Medien, Mehrspaltengestaltungen und Regionen ermöglicht, erzwingt oder verhindert. Wenn wir die Eigenschaft auf ein Element anwenden, geben wir damit an, ob vor oder nach dem Element ein Umbruch zwischen Seiten, Spalten und Regionen erfolgen soll oder verhindert werden soll.

Hinweis: break-before ist ein Alias für die veraltete Eigenschaft page-break-before.

Syntax

break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

Initial: auto
Gilt für: Block-Level-Boxen, Grid-Elemente, Flex-Elemente, Tabellenzeilengruppen, Tabellenzeilen
Vererbt: nein
Berechneter Wert: wie angegeben
Animationstyp: diskret

Werte

Zum Zeitpunkt der Erstellung dieses Artikels sind die folgenden Werte in der Spezifikation CSS Fragmentation Module Level 4 definiert, die sich im Status eines Editor-Entwurfs befindet. Einige der folgenden Werte sind daher experimentell und könnten sich zu einem späteren Zeitpunkt ändern. Tatsächlich waren die generischen Werte all und always unten nicht in den Level 3-Spezifikationen enthalten.

Das Wichtigste, was Sie über break-before wissen sollten, ist, dass es für paginierte Medien, Mehrspaltengestaltungen und Regionen konzipiert ist. Das bedeutet, dass wir drei Gruppen möglicher Werte haben, die je nach Kontext verwendet werden können.

Generische Umbruchwerte

Diese Werte sind generisch in dem Sinne, dass sie in allen drei Kontexten verwendet werden können

auto: Erzwingt oder verbietet keinen Umbruch (Seite, Spalte oder Region) vor dem Element.
avoid: Vermeidet einen Umbruch (Seite, Spalte oder Region) vor dem Element.
all: (Experimentell) Erzwingt einen Seitenumbruch nach dem Element und bricht alle möglichen Fragmentierungskontexte auf. Ein Umbruch innerhalb eines Mehrspaltencontainers, der sich innerhalb eines Seitencontainers befindet, würde also sowohl einen Spalten- als auch einen Seitenumbruch erzwingen.
always: (Experimentell) Erzwingt einen Umbruch nach dem Element. Dieser Wert bezieht sich auf die unmittelbar enthaltende Fragmentierung. Wenn wir uns beispielsweise innerhalb eines Mehrspaltencontainers befinden – wie bei der Verwendung der Eigenschaft column für den übergeordneten Container – würde dies einen Spaltenumbruch erzwingen; in paginierten Medien würde dies einen Seitenumbruch erzwingen.

Werte für paginierte Medien

avoid-page: Vermeidet jeden Seitenumbruch vor dem Element.
page: Erzwingt einen Seitenumbruch vor dem Element.
left: Erzwingt einen oder zwei Seitenumbrüche vor dem Element, sodass alles, was auf die nächste Seite gelangt, auf der linken Seite formatiert wird; d.h. es beginnt auf der linken Seite.
right: Erzwingt einen oder zwei Seitenumbrüche vor dem Element, sodass alles, was auf die nächste Seite gelangt, auf der rechten Seite formatiert wird; d.h. es beginnt auf der rechten Seite.
recto: (Experimentell) Erzwingt einen oder zwei Seitenumbrüche vor dem Element, sodass die nächste Seite als recto-Seite formatiert wird (d.h. eine rechte Seite bei der Leserichtung von links nach rechts oder eine linke Seite bei der Leserichtung von rechts nach links).
verso: (Experimentell) Erzwingt einen oder zwei Seitenumbrüche vor dem Element, sodass die nächste Seite als verso-Seite formatiert wird (d.h. eine linke Seite bei der Leserichtung von links nach rechts oder eine rechte Seite bei der Leserichtung von rechts nach links).

Werte für Mehrspaltengestaltung

avoid-column: (Experimentell) Vermeidet einen Spaltenumbruch vor dem Element.
column: (Experimentell) Erzwingt immer einen Spaltenumbruch vor dem Element.

Werte für Regionen

avoid-region: Vermeidet einen Regionenumbruch vor dem Element.
region: Erzwingt immer einen Regionenumbruch vor dem Element.

`break-before` ersetzt `page-break-before`

Wenn Ihnen break-before bekannt vorkommt, liegt das daran, dass es page-break-before ersetzt, eine von drei page-break-bezogenen Eigenschaften.

Was ist der Unterschied? Nun, page-break-before war nur für paginierte Medien gedacht. break-before ist wesentlich robuster in Bezug auf Einsatzort und -weise, da es nicht nur als Alias für page-break-before dient, sondern auch in den Spezifikationen für CSS Fragmentation, Multi-column Layout und Regions enthalten ist.

Hier ist eine Tabelle der Werte für break-before, die den Werten der alten Eigenschaft page-break-before entsprechen, wenn Sie sie als Alias verwenden

break-before	page-break-before
`auto`	`auto`
`avoid`	`avoid`
`right`	`right`
`left`	`left`
`page`	`always`

Auch wenn break-before page-break-before ersetzt, ist es immer noch ratsam, page-break-before als Fallback für Browser festzulegen, die break-before möglicherweise nicht unterstützen.

.element {
  page-break-before: always; /* fallback */
  break-before: page;
}

Aber was die Umstellung von page-break-before auf break-before in Ihrem Code angeht, keine Sorge. page-break-before wird nun als veraltete Kurzform für break-before aufgeführt und entspricht den obigen Tabellenwerten.

Demos

Werfen wir einen Blick auf einige Demos, um besser zu verstehen, wie break-before funktioniert.

Mehrspaltiges Layout

In dieser Demo haben wir eine Reihe von Boxen, die wir in einem Mehrspaltenschema anzeigen möchten. Genauer gesagt soll jede Box eine Spalte darstellen. Das ist der HTML-Code

<main>

  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
      Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
  </section>

  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
      Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
  </section>

  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam.
      Debitis quod repellendus reprehenderit obcaecati asperiores?</p>
  </section>

  <!-- and so on... -->

</main>

Wenn wir nur Spalten definieren und dort aufhören, gibt es keine Garantie dafür, dass die Boxen schön miteinander ausgerichtet sind.

Hier kommt break-before ins Spiel. Wenn wir es mit dem Wert column (wir arbeiten schließlich mit einem Mehrspaltenschema) auf das <section>-Element setzen, wie folgt

section {
  break-after: column;
}

...dann brechen die Spalten direkt vor jedem <section> um, was die Sache schön ordentlich macht.

Alias für paginierte Medien

In diesem Beispiel wird der Wert avoid verwendet, um jegliche Umbrüche von Seiten, Spalten oder Regionen im Layout zu verhindern. Wenn die Seite gedruckt wird – ja, mit einem echten Drucker, der Papier verwendet –, gibt es keine Umbrüche zwischen den Spalten. Stattdessen erhalten wir ein schönes einspaltiges Layout, das besser zum Drucken geeignet ist.