---
title: break-after
slug: Web/CSS/break-after
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Fragmentierung
  - NeedsExample
  - Referenz
translation_of: Web/CSS/break-after
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>break-after</code> <a href="/en-US/docs/CSS">CSS</a> Eigenschaft gibt an, wie die Seite, die Spalte oder der Abschnitt nach der generierten Box umbricht. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.</p>

<p>Jeder mögliche Brechpunkt, das sind alle Begrenzungen des Elements, ist unter dem Einfluss von drei Eigenschaften: dem <code>break-after</code> Wert des vorhergehenden Elements, dem {{cssxref("break-before")}} des nächsten Elements und dem {{cssxref("break-inside")}} Wert von dem beinhaltenden Elements.</p>

<p>Um zu ermitteln ob ein Umbruch erfolgen muss, werden folgende Regeln angwendet:</p>

<ol>
 <li>Wenn einer der drei Betroffenen Werte ein <em>forced break value</em> ist (das sind <code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> oder <code>region</code>), hat er Vorrang. Wenn mehrere der betroffenen Werte solch ein Umbruch sind, wird der Wert des Elements, welches als letztes im Flow auftritt, verwendet (der {{cssxref("break-before")}} hat Vorrang gegenüber dem <code>break-after</code> Wert, welches wiederum Vorrang gegebüber dem {{cssxref("break-inside")}} Wert hat).</li>
 <li>Wenn einer der drei betroffenen Werte ein <em>avoid break value</em> ist (das sind <code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> oder <code>avoid-column</code>), wird kein Umbruch gemacht.</li>
</ol>

<p>Wenn einmal ein gezwungener Umbruch gemacht worden ist, werden bei Bedarf weiche Umbrüche hinzugefügt. Aber nicht auf Elementbegrenzungen, welche zu einem entsprechenden avoid Wert führen.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">break-after: auto;
break-after: always;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;
break-after: page;
break-after: column;
break-after: region;
break-after: avoid;
break-after: avoid-page;
break-after: avoid-column;
break-after: avoid-region;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Initialwert. Erlaubt (bedeutet kein Verbot oder Zwang) das Einfügen jeden Umbruchs (entweder Seite, Spalte oder Abschnitt) nach der hauptsächlichen Box.</dd>
 <dt><code>always</code></dt>
 <dd>Erzwingt immer Umbrüche nach der hauptsächlichen Box. Das ist ein Synonym für <code>page</code>, welches beibehalten wurde, um Übergänge von {{cssxref("page-break-after")}} zu ermöglichen, welche eine Teilmenge dieser Eigenschaft sind.</dd>
 <dt><code>avoid</code></dt>
 <dd>Verhindert das Einfügen jeglicher Umbrüche für page, column oder region nach der hauptsächlichen Box.</dd>
 <dt><code>left</code></dt>
 <dd>Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als linke Seite formatiert wird.</dd>
 <dt><code>right</code></dt>
 <dd>Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als rechte Seite formatiert wird.</dd>
 <dt><code>page</code></dt>
 <dd>Erzwingt immer einen Seitenumbruch direkt nach der hauptsächlichen Box.</dd>
 <dt><code>column</code></dt>
 <dd>Erzwingt immer einen Spaltenumbruch direkt nach der hauptsächlichen Box.</dd>
 <dt><code>region </code>{{experimental_inline}}</dt>
 <dd>Erzwing immer einen Abschnittsumbruch direkt nach der hauptsächlichen Box.</dd>
 <dt><code>recto</code> {{experimental_inline}}</dt>
 <dd>Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine recto Seite (eine rechte Seite in einer links-nach-rechts Ausdehnung oder eine linke Seite in einer rechts-nach-links Ausdehnung) formatiert wird.</dd>
 <dt><code>verso </code>{{experimental_inline}}</dt>
 <dd>Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine verso Seite (eine linke Seite in einer links-nach-rechts Ausdehnung oder eine rechte Seite in einer rechts-nach-links Ausdehnung) formatiert wird.</dd>
 <dt><code>avoid-page</code></dt>
 <dd>Verhindert jeden Seitenumbruch direkt nach der hauptsächlichen Box.</dd>
 <dt><code>avoid-column</code></dt>
 <dd>Verhindert jeden Spaltenumbruch direkt nach der hauptsächlichen Box.</dd>
 <dt><code>avoid-region </code>{{experimental_inline}}</dt>
 <dd>Verhindert jeden Anschnittsumbruch direkt nach der hauptsächlichen Box.</dd>
</dl>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Bemerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}</td>
   <td>{{Spec2('CSS3 Fragmentation')}}</td>
   <td>Fügt die Schlüsselwörter <code>recto</code> und <code>verso</code> hinzu. Ändert dne Medientyp dieser Eigenschaft von <code>paged</code> zu {{xref_cssvisual}}. Präzisiert den Algorithmus für verschiedene Arten von Umbrüchen.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
   <td>{{Spec2('CSS3 Regions')}}</td>
   <td>Erweitert die Eigenschaft, um Abschnittsumbrüche handhaben zu können. Für die Schlüsselwörter <code>avoid-region</code> und <code>region</code> hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td>
   <td>{{Spec2('CSS3 Multicol')}}</td>
   <td>Initiale Spezifikation. Erweitert die CSS 2.1 {{cssxref("page-break-after")}} Eigenschaft, um Seiten- und Spaltenumbrüche handhaben zu können.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Webbrowserkompatibilität</h2>

{{Compat("css.properties.break-after")}}