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
|
---
title: page-break-after
slug: Web/CSS/page-break-after
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/page-break-after
---
<div>{{CSSRef}}</div>
<div class="blockIndicator warning">
<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p>
</div>
<p>La propriété CSS <strong><code>page-break-after</code></strong> permet d'ajuster les sauts de page placés <em>après</em> l'élément courant.</p>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
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;
/* Valeurs globales */
page-break-after: inherit;
page-break-after: initial;
page-break-after: unset;
</pre>
<p>Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
<h2 id="Synonymes_avec_break-after">Synonymes avec <code>break-after</code></h2>
<p>La propriété <code>page-break-after</code> est désormais remplacée par {{cssxref("break-after")}}.</p>
<p>Si pour des raisons de compatibilité, on doit traiter <code>page-break-after</code> comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>page-break-after</code></th>
<th scope="col"><code>break-after</code></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>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
<dt><code>always</code></dt>
<dd>Le saut de page est toujours forcé après l'élément.</dd>
<dt><code>avoid</code></dt>
<dd>Les sauts de page sont évités après l'élément.</dd>
<dt><code>left</code></dt>
<dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
<dt><code>right</code></dt>
<dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
<dt><code>recto</code> {{experimental_inline}}</dt>
<dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
<dt><code>verso</code> {{experimental_inline}}</dt>
<dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<pre class="brush: css">/* On force une nouvelle page à la suite */
/* d'une note en bas de page */
div.footnotes {
page-break-after: always;
}
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td>
<td>{{Spec2('CSS Logical Properties')}}</td>
<td>Ajout des valeurs <code>recto</code> et <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>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.page-break-after")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("break-before")}}</li>
<li>{{cssxref("break-after")}}</li>
<li>{{cssxref("break-inside")}}</li>
<li>{{cssxref("page-break-before")}}</li>
<li>{{cssxref("page-break-inside")}}</li>
<li>{{cssxref("orphans")}}</li>
<li>{{cssxref("widows")}}</li>
</ul>
|
