break-inside
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.
/* 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 break-after
de l'élément précédent, la valeur de 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 :
- Si l'une des trois valeurs correspond à une rupture forcée (
always
,left
,right
,page
,column
ouregion
), 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,break-before
l'emporte surbreak-after
qui l'emporte surbreak-inside
). - Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (
avoid
,avoid-page
,avoid-region
ouavoid-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
Expérimental-
Cette valeur interdit toute rupture de région au sein de la boîte.
Définition formelle
Valeur initiale | auto |
---|---|
Applicabilité | éléments de type bloc |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Syntaxe formelle
Synonymes pour page-break-inside
Pour des raisons de compatibilité, la propriété historique 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
.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
<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
Spécifications
Specification |
---|
CSS Fragmentation Module Level 3 # break-within |
CSS Regions Module Level 1 # region-flow-break |
CSS Multi-column Layout Module Level 1 # break-before-break-after-break-inside |
Compatibilité des navigateurs
BCD tables only load in the browser