1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
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>
{{csssyntax}}
<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")}}
|
