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
|
---
title: break-inside
slug: Web/CSS/break-inside
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/break-inside
---
{{CSSRef}}
La propriété CSS **`break-inside`** 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.
```css
/* 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;
```
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 `break-inside` de l'élément englobant.
Pour déterminer si on a une rupture, on applique les règles suivantes :
1. Si l'une des trois valeurs correspond à une rupture forcée (`always`, `left`, `right`, `page`, `column` ou `region`), 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 `break-inside`).
2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (`avoid`, `avoid-page`, `avoid-region` ou `avoid-column`), aucune rupture ne sera appliquée à cet endroit.
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.
## Syntaxe
La propriété `break-inside` se définit avec un mot-clé parmi ceux de la liste ci-après.
### Valeurs
- `auto`
- : Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
- `avoid`
- : Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.
- `avoid-page`
- : Cette valeur interdit toute rupture de page au sein de la boîte.
- `avoid-column`
- : Cette valeur interdit toute rupture de colonne au sein de la boîte.
- `avoid-region` {{experimental_inline}}
- : Cette valeur interdit toute rupture de région au sein de la boîte.
### Syntaxe formelle
{{csssyntax}}
## Synonymes pour `page-break-inside`
Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme `break-inside`. De cette façon, cela permet aux sites qui utilisaient `page-break-inside` de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :
| `page-break-inside` | `break-inside` |
| ------------------- | -------------- |
| `auto` | `auto` |
| `avoid` | `avoid` |
## Exemples
### CSS
```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;
}
```
### HTML
```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>
```
### Résultat
{{EmbedLiveSample("Exemples","400","300")}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------- |
| {{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}} | {{Spec2('CSS3 Fragmentation')}} | Aucune modification. |
| {{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}} | {{Spec2('CSS3 Regions')}} | Ajout de la gestion des ruptures de région. |
| {{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.break-inside", 4)}}
### Notes relatives à la compatibilité
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.
Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée `-webkit-column-break-inside` afin de contrôler les ruptures de colonne.
|
