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
|
---
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>{{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>
{{Compat("css.properties.page-break-after")}}
<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>
|
