CSS break-after-Eigenschaft

Die CSS-Eigenschaft break-after definiert, wie Seiten-, Spalten- oder Regionsumbrüche nach dem generierten Box-Element behandelt werden sollen. Sie unterstützt die folgenden Werte: auto, avoid, always, all, page, column, region, avoid-page, avoid-column und avoid-region.

Wird sie auf ein Element innerhalb eines Multicol-Containers angewendet, der sich wiederum in einem Seitencontainer befindet, erzwingt sie sowohl einen Spalten- als auch einen Seitenumbruch.

Jede Elementgrenze wird von drei Eigenschaften beeinflusst:

break-after auf dem vorangehenden Element.
break-before auf dem aktuellen Element.
break-inside auf dem übergeordneten Element.

Wenn mehrere Umbruch-Eigenschaften zutreffen, bestimmen die folgenden Auflösungsregeln das Ergebnis:

Erzwingte Umbrüche (z. B. page, column, always) haben Vorrang vor Umbrüchen, die vermieden werden sollen.
Wenn mehrere erzwingende Umbrüche zutreffen, hat break-before Vorrang vor break-after, welches Vorrang vor break-inside hat.
Wenn einer der zutreffenden Werte ein Umbruch-Vermeidungswert ist (avoid, avoid-page, avoid-column oder avoid-region), wird der Umbruch nicht angewendet.

Anfangswert	auto
Anwendbar auf	Block-Elemente.
Vererbt	Nein.
Animierbar	diskret
Version	CSS3
DOM-Syntax	object.style.breakAfter = "always";

Syntax

Syntax der CSS break-after-Eigenschaft

css

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

Beispiel für die break-after-Eigenschaft:

Beispiel für die CSS break-after-Eigenschaft mit dem Wert column

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

Try it Yourself »

Ergebnis

Values of CSS break-after Property

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 einschließ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	Legt diese Eigenschaft auf ihren Standardwert fest.
inherit	Erbt diese Eigenschaft von ihrem übergeordneten Element.

CSS break-after-Eigenschaft ​

Syntax ​

Beispiel für die break-after-Eigenschaft: ​

Ergebnis ​

Werte ​

Praxis ​

CSS break-after-Eigenschaft

Syntax

Beispiel für die break-after-Eigenschaft:

Ergebnis

Werte

Praxis