Break-after | CSS-Tricks

CSS Almanac → Eigenschaften → B → break-after

Sunkanmi Fafowora am 16. Juni 2022

Die CSS-Eigenschaft break-after ist praktisch, da sie Umbrüche in paginierten Medien, Mehrspaltigkeit und Regionen ermöglicht, erzwingt oder verhindert. Wenn wir die Eigenschaft auf ein Element anwenden, geben wir damit eine Anweisung, ob zwischen Seiten, Spalten und Regionen umgebrochen werden soll oder nicht.

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

Syntax

break-after: 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 des CSS Multi-column Layout Module Level 1 definiert, die sich im Entwurfsstadium befindet. Einige der folgenden Werte sind daher experimentell und könnten sich jederzeit ändern.

Das Wichtigste, was Sie über break-after wissen sollten, ist, dass es für paginierte Medien, Mehrspaltigkeit und Regionen konzipiert ist. Das bedeutet, dass wir drei Sätze 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: Weder Erzwingen noch Verhindern eines Umbruchs (Seite, Spalte oder Region) nach dem Element.
avoid: Vermeidet einen Umbruch (Seite, Spalte oder Region) nach dem Element.
all: (Experimentell) Erzwingt einen Seitenumbruch nach dem Element. Umbruch durch alle möglichen Fragmentierungskontexte. Ein Umbruch innerhalb eines Mehrspaltigkeitscontainers, der sich innerhalb eines Seitencontainers befand, würde einen Spalten- und Seitenumbruch erzwingen.
always: (Experimentell) Erzwingt einen Seitenumbruch nach dem Element. Dieser Wert bezieht sich auf die unmittelbar umschließende Fragmentierung. Wenn wir uns innerhalb eines Mehrspaltigkeitscontainers befinden, z. B. bei Verwendung der Eigenschaft column für den übergeordneten Container, würde dies einen Spaltenumbruch erzwingen. In paginierten Medien wird ein Seitenumbruch erzwungen.

Werte für paginierte Medien

avoid-page: Vermeidet jeden Seitenumbruch nach dem Element.
page: Erzwingt einen Seitenumbruch nach dem Element.
left: Erzwingt einen oder zwei Seitenumbrüche nach 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 nach 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 nach dem Element, sodass die nächste Seite als recto-Seite formatiert wird (d. h. eine rechte Seite bei Bewegung von links nach rechts oder eine linke Seite bei Bewegung von rechts nach links).
verso: (Experimentell) Erzwingt einen oder zwei Seitenumbrüche nach dem Element, sodass die nächste Seite als verso-Seite formatiert wird (d. h. eine linke Seite bei Bewegung von links nach rechts oder eine rechte Seite bei Bewegung von rechts nach links).

Werte für Mehrspaltigkeit

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

Regionen-Werte

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

`break-after` ersetzt `page-break-after`

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

Was ist der Unterschied? Nun, page-break-after war nur für paginierte Medien gedacht. break-after ist weitaus robuster, was den Einsatzort und die Art und Weise betrifft, da es nicht nur als Alias für page-break-after dient, sondern auch in den Spezifikationen für CSS Fragmentation, Multi-column Layout und Regions enthalten ist.

Hier ist eine Tabelle der break-after-Werte, die den älteren page-break-after-Eigenschaftswerten entsprechen, wenn Sie sie als Alias verwenden.

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

Auch wenn break-after page-break-after ersetzt, ist es immer noch eine gute Idee, page-break-after als Fallback für Browser zu setzen, die möglicherweise keine Unterstützung für break-after haben.

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

Demos

Werfen wir einen Blick auf ein paar Demos, um besser zu verstehen, wie break-after funktioniert.

Mehrspaltiges Layout

In dieser Demo haben wir eine Reihe von Boxen, die wir in einem Mehrspaltigkeitslayout anzeigen möchten. Genauer gesagt, möchten wir, dass jede Box eine Spalte ist. Dies ist das HTML.

<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 einfach nur Spalten definieren und aufhören würden, gibt es keine Garantie, dass die Boxen schön aneinander ausgerichtet sind.

Dafür ist break-after da. Wenn wir es mit dem Wert column (wir arbeiten schließlich mit einem Mehrspaltigkeitslayout) auf das <section>-Element setzen, wie hier:

section {
  break-after: column;
}

...dann werden die Spalten direkt nach jedem <section> umbrochen, was die Dinge schön aufräumt.

Alias für paginierte Medien

In diesem Beispiel wird der Wert avoid verwendet, um jegliche Seiten-, Spalten- oder Regionenumbrüche im Layout zu verhindern, sodass beim Drucken der Seite – ja, mit einem echten Drucker, der Papier verwendet – keine Umbrüche zwischen den Spalten auftreten. Stattdessen erhalten wir ein schönes einspaltiges Layout, das sich besser zum Drucken eignet.