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
192
193
194
195
196
197
198
199
|
---
title: page-break-after
slug: Web/CSS/page-break-after
tags:
- page-break-after
- page-break-after & break-after
translation_of: Web/CSS/page-break-after
---
<div></div>
<div>{{CSSRef}}</div>
<p><strong><code>page-break-after</code></strong> CSS 属性调整当前元素之后的分页符。</p>
<p>此属性适用于生成一个盒子的块元素。它不适用于不会生成一个盒子的空 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div" title="HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用 (比如 <article> 或 <nav>) 。"><code><div></code></a>。</p>
<pre class="notranslate"><code>/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;
/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;</code></pre>
<div class="note">
<p><strong>Note:</strong> 这个属性正在被更通用的 {{ cssxref("break-after")}} 取代。这个新的属性也处理列和区域中断，并在语法上兼容 <code>page-break-after</code>。</p>
<p>在使用 <code>page-break-after</code> 之前，请检查是否可以使用 <code>break-after</code> 代替。 在将来， <code>page-break-after</code> 将只是它的一些值的别名。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush:css notranslate">/* Keyword values */
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: recto;
page-break-after: verso;
/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;
</pre>
<h3 id="Values">Values</h3>
<dl>
<dt><code>auto</code></dt>
<dd>初始值。 自动分页符（既不强制也不禁止）。</dd>
<dt><code>always</code></dt>
<dd>始终在元素后强制分页。</dd>
<dt><code>avoid</code></dt>
<dd>避免在元素后出现分页符。</dd>
<dt><code>left</code></dt>
<dd>在元素之后足够的分页符，一直到一张空白的左页为止。</dd>
<dt><code>right</code></dt>
<dd>在元素之后足够的分页符，一直到一张空白的右页为止。</dd>
<dt><code>recto</code> {{experimental_inline}}</dt>
<dd>If pages progress left-to-right, then this acts like <code>right</code>. If pages progress right-to-left, then this acts like <code>left</code>.</dd>
<dt><code>verso</code> {{experimental_inline}}</dt>
<dd>If pages progress left-to-right, then this acts like <code>left</code>. If pages progress right-to-left, then this acts like <code>right</code>.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<pre class="brush: css notranslate">/* move to a new page after footnotes */
div.footnotes {
page-break-after:always;
}
</pre>
<h2 id="Specification">Specification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}</td>
<td>{{Spec2('CSS Logical Properties')}}</td>
<td>Adds the values <code>recto</code> and <code>verso</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after') }}</td>
<td>{{ Spec2('CSS3 Paged Media') }}</td>
<td>Extends the element that this property applies to table rows and table row groups.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support (<code>auto</code>, <code>always</code>)</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("1.0") }}</td>
<td>4.0</td>
<td>7.0</td>
<td>1.2 (125)</td>
</tr>
<tr>
<td><code>avoid</code>, <code>left</code>, <code>right</code></td>
<td>1.0</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatNo() }} ({{ bug("132035") }})</td>
<td>4.0</td>
<td>7.0</td>
<td>1.2 (125)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td><code>avoid</code>, <code>left</code>, <code>right</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatNo() }} ({{ bug("132035") }})</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en/CSS/page-break-before" title="en/CSS/page-break-before"><code>page-break-before</code></a>, <a href="/en/CSS/page-break-inside" title="en/CSS/page-break-inside"><code>page-break-inside</code></a></li>
<li><a href="/en/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/en/CSS/widows" title="en/CSS/widows"><code>widows</code></a></li>
</ul>
|
