CSS break-after Eigenschaft

Die CSS-Eigenschaft break-after steuert das Verhalten eines Fragmentierungsumbruchs nach einer bestimmten Box. Ein Fragmentierungsumbruch ist der Punkt, an dem Inhalt auf zwei Fragmente aufgeteilt wird — zwei gedruckte Seiten, zwei Spalten eines mehrspaltige Layouts oder zwei CSS-Regionen. Mit break-after können Sie einen Umbruch erzwingen ("nächsten Abschnitt auf einer neuen Seite/Spalte beginnen") oder verhindern ("diese Überschrift mit dem nachfolgenden Text zusammenhalten").

Die Eigenschaft unterstützt folgende Werte: auto, avoid, always, all, page, column, region, avoid-page, avoid-column und avoid-region.

Wird die Eigenschaft auf ein Element innerhalb eines Mehrspaltenbehälters angewendet, der sich zugleich in einem seitenbasierten Kontext befindet, erzwingen always (und all) an derselben Grenze sowohl einen Spaltenumbruch als auch einen Seitenumbruch.

Wann break-after einsetzen

Greifen Sie auf break-after zurück, wenn der natürliche Inhaltsfluss an einer ungünstigen Stelle unterbrochen würde:

Druckstylesheets. Starten Sie jeden übergeordneten Abschnitt mit break-after: page auf einem neuen Blatt Papier, oder verhindern Sie, dass eine Rechnungssumme am Anfang der nächsten Seite verwaist.
Mehrspaltige Texte. Schieben Sie eine Unterüberschrift an den Beginn der nächsten Spalte, anstatt sie am Ende der aktuellen Spalte hängen zu lassen.
CSS-Regionen / Medien-Viewer mit Seitenumbruch. Steuern Sie, wie Inhalt von einem Behälter zum nächsten fließt.

break-after wirkt nur innerhalb eines Fragmentierungskontexts — eines gedruckten/seitenbasierten Dokuments, eines column-count/column-width-Behälters oder einer Regionenkette. Auf einer gewöhnlichen scrollbaren Seite hat die Eigenschaft keine sichtbare Wirkung, weshalb das Beispiel unten einen Mehrspaltenbehälter verwendet.

Wie Umbrucheigenschaften aufgelöst werden

Jede Elementgrenze wird durch drei Eigenschaften beeinflusst:

break-after am vorherigen Element.
break-before am aktuellen Element.
break-inside am übergeordneten Element.

Wenn mehrere Umbrucheigenschaften gelten, bestimmen folgende Auflösungsregeln das Ergebnis:

Erzwungene Umbrüche (z. B. page, column, always) haben Vorrang vor vermiedenen Umbrüchen.
Wenn mehrere erzwungene Umbrüche gelten, hat break-before Vorrang vor break-after, das wiederum Vorrang vor break-inside hat.
Wenn ein anwendbarer Wert ein vermiedener Umbruch ist (avoid, avoid-page, avoid-column oder avoid-region), wird der Umbruch nicht angewendet.

Anfangswert	auto
Gilt für	Blockelemente.
Vererbbar	Nein.
Animierbar	diskret
Version	CSS3
DOM-Syntax	object.style.breakAfter = "always";

Syntax

Syntax der CSS-Eigenschaft break-after

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Beispiel für break-after mit einem Spaltenumbruch

In einem dreispaltigen Behälter erhält das <hr>-Element break-after: column. Anstatt die Spalten automatisch zu balancieren, beendet der Browser die aktuelle Spalte direkt nach dem Trennstrich und setzt den restlichen Inhalt in der nächsten Spalte fort — so beginnt der zweite „Lorem ipsum"-Block immer am Anfang einer neuen Spalte.

<!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-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel für break-after mit einem Seitenumbruch

Dies ist der häufigste Anwendungsfall in der Praxis: ein Druckstylesheet, das jedes Kapitel auf einer eigenen Seite beginnt. Öffnen Sie die Druckvorschau Ihres Browsers (Strg/Cmd + P), um zu sehen, wie jedes <section>-Element auf einem neuen Blatt beginnt.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      @media print {
        section {
          break-after: page;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>This chapter prints on its own page.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Because the previous section has break-after: page,
         this chapter starts at the top of the next printed page.</p>
    </section>
    <section>
      <h2>Chapter 3</h2>
      <p>And so does this one.</p>
    </section>
  </body>
</html>

Werte

Wert	Beschreibung
auto	Erlaubt jeden Umbruch (Seite, Spalte, Region) nach der Hauptbox.
avoid	Vermeidet jeden Umbruch nach der Hauptbox.
always	Erzwingt einen Umbruch nach der Hauptbox.
all	Erzwingt einen Umbruch nach der Hauptbox und allen umschließenden Boxen desselben Typs (z. B. alle Spalten oder alle Seiten).
page	Erzwingt einen Seitenumbruch nach der Hauptbox.
column	Erzwingt einen Spaltenumbruch nach der Hauptbox.
region	Erzwingt einen Regionsumbruch nach der Hauptbox.
avoid-page	Vermeidet einen Seitenumbruch nach der Hauptbox.
avoid-column	Vermeidet einen Spaltenumbruch nach der Hauptbox.
avoid-region	Vermeidet einen Regionsumbruch nach der Hauptbox.
initial	Setzt diese Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt diese Eigenschaft vom übergeordneten Element.

Übungsaufgaben

Übung

Welche der folgenden Werte sind gültige Werte für die CSS-Eigenschaft 'break-after'?