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
|
---
title: break-inside
slug: Web/CSS/break-inside
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/break-inside
---
<div>{{CSSRef}}</div>
<p>La propriété CSS <strong><code>break-inside</code></strong> définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
/* Valeurs globales */
break-inside: inherit;
break-inside: initial;
break-inside: unset;
</pre>
<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
<ol>
<li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur <code>break-inside</code>).</li>
<li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> ou <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
</ol>
<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La propriété <code>break-inside</code> se définit avec un mot-clé parmi ceux de la liste ci-après.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).</dd>
<dt><code>avoid</code></dt>
<dd>Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.</dd>
<dt><code>avoid-page</code></dt>
<dd>Cette valeur interdit toute rupture de page au sein de la boîte.</dd>
<dt><code>avoid-column</code></dt>
<dd>Cette valeur interdit toute rupture de colonne au sein de la boîte.</dd>
<dt><code>avoid-region</code> {{experimental_inline}}</dt>
<dd>Cette valeur interdit toute rupture de région au sein de la boîte.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Synonymes_pour_page-break-inside">Synonymes pour <code>page-break-inside</code></h2>
<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme <code>break-inside</code>. De cette façon, cela permet aux sites qui utilisaient <code>page-break-inside</code> de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>page-break-inside</code></th>
<th scope="col"><code>break-inside</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td><code>avoid</code></td>
<td><code>avoid</code></td>
</tr>
</tbody>
</table>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.exemple {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
p {
break-inside: avoid-column;
/* Pour Firefox : */
page-break-inside: avoid;
/* Pour WebKit : */
-webkit-column-break-inside: avoid;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="exemple">
<p>« Mais alors, » pensa Alice, « ne serai-je donc
jamais plus vieille que je ne le suis maintenant ?
D’un côté cela aura ses avantages, ne jamais être
une vieille femme. Mais alors avoir toujours des
leçons à apprendre ! Oh, je n’aimerais pas cela du
tout. »</p>
<p>« Oh ! Alice, petite folle, » se répondit-elle.
« Comment pourriez-vous apprendre des leçons ici ?
Il y a à peine de la place pour vous, et il n’y en
a pas du tout pour vos livres de leçons. »</p>
</div></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
<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('CSS3 Fragmentation', '#break-within', 'break-inside')}}</td>
<td>{{Spec2('CSS3 Fragmentation')}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
<td>{{Spec2('CSS3 Regions')}}</td>
<td>Ajout de la gestion des ruptures de région.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
<td>{{Spec2('CSS3 Multicol')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.break-inside", 4)}}</p>
<h3 id="Notes_relatives_à_la_compatibilité">Notes relatives à la compatibilité</h3>
<p>Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.</p>
<p>Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée <code>-webkit-column-break-inside</code> afin de contrôler les ruptures de colonne.</p>
|
