break-inside
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2019.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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,columnouregion), 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-beforel'emporte surbreak-afterqui l'emporte surbreak-inside). - Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (
avoid,avoid-page,avoid-regionouavoid-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-regionExpé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
break-inside =
auto |
avoid |
avoid-page |
avoid-column |
avoid-region
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
Chargement…