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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
---
title: break-after
slug: Web/CSS/break-after
tags:
- CSS
- CSS 属性
- 参考
translation_of: Web/CSS/break-after
---
<div>{{CSSRef}}</div>
<p><strong><code>break-after</code></strong> <a href="/en-US/docs/CSS">CSS</a> 属性描述在生成的盒子之后的页面，列或区域中断行为（换句话说，如何以及是否中断）。如果没有生成的盒子，则该属性将被忽略。</p>
<pre class="brush:css no-line-numbers">/* Generic break values */
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;
/* Page break values */
break-after: avoid-page;
break-after: page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;
/* Column break values */
break-after: avoid-column;
break-after: column;
/* Region break values */
break-after: avoid-region;
break-after: region;
/* Global values */
break-after: inherit;
break-after: initial;
break-after: unset;
</pre>
<p>每个潜在的断点（亦即每个元素的边界）都受到三个属性的影响：上一个元素的 <code>break-after</code> 值、下一个元素的 <code>break-before</code> 值以及当前元素自身的 <code>break-inside</code> 值。</p>
<p>以下规则被用于判断中断是否必要：</p>
<ol>
<li>如果上述三个属性中，如果任何一个的值属于“强制中断”值，那么这个属性将被优先应用，此处所称“强制中断”的值为： <code>always</code>、 <code>left</code>、 <code>right</code>、 <code>page</code>、 <code>column</code> 和 <code>region</code>。If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the {{cssxref("break-before")}} value has precedence over the <code>break-after</code> value, which itself has precedence over the {{cssxref("break-inside")}} value).</li>
<li>If any of the three concerned values is an <em>avoid break value</em>, that is <code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>, no such break will be applied at that point.</li>
</ol>
<p>Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding <code>avoid</code> value.</p>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<p>The <code>break-after</code> property is specified as one of the keyword values from the list below.</p>
<h3 id="属性值">属性值</h3>
<h4 id="Generic_break_values">Generic break values</h4>
<dl>
<dt><code>auto</code></dt>
<dd>Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.</dd>
<dt><code>avoid</code></dt>
<dd>Avoids any break (page, column, or region) from being inserted right after the principal box.</dd>
<dt><code>always</code> {{experimental_inline}}</dt>
<dd>Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.</dd>
<dt><code>all</code> {{experimental_inline}}</dt>
<dd>Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.</dd>
</dl>
<h4 id="Page_break_values">Page break values</h4>
<dl>
<dt><code>avoid-page</code></dt>
<dd>Avoids any page break right after the principal box.</dd>
<dt><code>page</code></dt>
<dd>Forces a page break right after the principal box.</dd>
<dt><code>left</code></dt>
<dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a left page.</dd>
<dt><code>right</code></dt>
<dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a right page.</dd>
<dt><code>recto</code> {{experimental_inline}}</dt>
<dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)</dd>
<dt><code>verso</code> {{experimental_inline}}</dt>
<dd>Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)</dd>
</dl>
<h4 id="Column_break_values">Column break values</h4>
<dl>
<dt><code>avoid-column</code></dt>
<dd>Avoids any column break right after the principal box.</dd>
<dt><code>column</code></dt>
<dd>Forces a column break right after the principal box.</dd>
</dl>
<h4 id="Region_break_values">Region break values</h4>
<dl>
<dt><code>avoid-region</code> {{experimental_inline}}</dt>
<dd>Avoids any region break right after the principal box.</dd>
<dt><code>region</code> {{experimental_inline}}</dt>
<dd>Forces a region break right after the principal box.</dd>
</dl>
<h3 id="形式化语法">形式化语法</h3>
{{csssyntax}}
<h2 id="Page_break_aliases">Page break aliases</h2>
<p>For compatibility reasons, the legacy {{cssxref("page-break-after")}} property should be treated by browsers as an alias of <code>break-after</code>. This ensures that sites using <code>page-break-after</code> continue to work as designed. A subset of values should be aliased as follows:</p>
<table>
<thead>
<tr>
<th scope="col">page-break-after</th>
<th scope="col">break-after</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td><code>left</code></td>
<td><code>left</code></td>
</tr>
<tr>
<td><code>right</code></td>
<td><code>right</code></td>
</tr>
<tr>
<td><code>avoid</code></td>
<td><code>avoid</code></td>
</tr>
<tr>
<td><code>always</code></td>
<td><code>page</code></td>
</tr>
</tbody>
</table>
<div class="blockIndicator note">
<p>The <code>always</code> value of <code>page-break-*</code> was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to <code>page</code>, rather than the <code>always</code> value in the Level 4 spec.</p>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fragmentation', '#break-between', 'break-after')}}</td>
<td>{{Spec2('CSS3 Fragmentation')}}</td>
<td>Adds the <code>recto</code> and <code>verso</code> keywords. Changes the media type of this property from <code>paged</code> to {{xref_cssvisual}}. Defines the breaking algorithm with different kinds of breaks.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
<td>{{Spec2('CSS3 Regions')}}</td>
<td>Extends the property to handle region breaks. Adds the <code>avoid-region</code> and <code>region</code> keywords.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-after')}}</td>
<td>{{Spec2('CSS3 Multicol')}}</td>
<td>Initial definition. Extends the CSS 2.1 {{cssxref("page-break-after")}} property to handle both page and column breaks.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<h3 id="Support_in_multi-column_layout">Support in multi-column layout</h3>
<p>{{Compat("css.properties.break-after.multicol_context")}}</p>
<h3 id="Support_in_paged_media">Support in paged media</h3>
<p>{{Compat("css.properties.break-after.paged_context")}}</p>
|
