break-inside - Propriété CSS
Résumé des caractéristiques de la propriété break-inside
auto
| avoid
| avoid-column
| avoid-page
| avoid-region
auto
break-inside
passe d'une valeur à l'autre sans transition. Dans la pratique l'animation n'est pas gérée (voir plus bas).Description.
La propriété break-inside
indique si l'élément peut être fragmenté sur plusieurs colonnes,
plusieurs pages, etc.
break-inside
, utilisée en combinaison avec les propriétés break-before
et
break-after
, permet de gérer finement les sauts de pages, de régions ou de colonnes.
L'obligation ou l'interdiction d'un saut est définie par ces trois propriétés.
Sur l'exemple ci-dessous, le saut entre les éléments 1 et 2 est défini par :
- La propriété
break-inside
de l'élément parent. - La propriété
break-after
de l'élément 1. - La propriété
break-before
de l'élément 2.
S'il y a contradiction entre les trois propriétés, la dernière rencontrée écrase les précédentes :
break-before
de l'élément 2 est donc prioritaire sur break-after
de l'élément 1,
qui est lui-même prioritaire sur du parent.
La résolution des sauts s'effectue de la façon suivante :
- Le navigateur effectue d'abord les sauts forcés.
- Il détermine ensuite les sauts rendus nécessaires par le mangue de place, en respectant les interdictions de saut éventuelles.
break-inside
remplace l'ancienne propriété page-break-inside
qui ne devrait plus être utilisée.
Syntaxes pour break-inside
.
break-inside:
;
- break-inside: auto;
Valeur par défaut. Les ruptures sont permises, aucune contrainte n'est appliquée.
- break-inside: avoid;
Dans la mesure du possible, l'élément ne doit pas être fragmenté. S'il ne tient pas dans la colonne ou dans la page il sera rejeté à la colonne ou la page suivante. Si sa hauteur est supérieure à celle de la colonne ou de la page, il peut cependant être fragmenté (pas moyen de faire autrement).
- break-inside: avoid-page;
Dans la mesure du possible, l'élément ne doit pas être fragmenté sur plusieurs pages. Cette valeur autorise la fragmentation sur plusieurs colonnes ou régions. Si l'élément ne tient pas dans ce qui reste de page il sera rejeté à la page suivante. L'élément peut cependant se retrouver fragmenté si sa hauteur est supérieure à celle de la page.
- break-inside: avoid-column;
Dans la mesure du possible, l'élément ne doit pas être fragmenté sur plusieurs colonnes, ce qui implique également qu'il ne doit pas être fragmenté sur plusieurs pages. Si l'élément ne tient pas dans la place restante en bas de la colonne, il est rejeté en haut de la colonne suivante. L'élément peut cependant être fragmenté si sa hauteur est supérieure à celle de la colonne.
Pour plus de détails sur la mise en page sur plusieurs colonnes, consultez la page sur le multi-colonage.
- break-inside: avoid-region;
Dans la mesure du possible, l'élément ne doit pas être fragmenté sur plusieurs régions, ce qui implique également qu'il ne doit pas être fragmenté sur plusieurs pages. Si l'élément ne tient pas dans la région, il est rejeté à la région suivante. L'élément peut cependant être fragmenté si sa hauteur est supérieure à celle de la région.
Vous trouverez plus de détails sur la mise en page par régions en consultant le tutoriel sur les régions (flux nommés).
- break-inside:
initial
; break-inside:inherit
; break-inside:revert
; break-inside:revert-layer
; break-inside:unset
;La valeur initiale est :
.auto
Animation de la propriété break-inside
.
La norme prévoit la possibilité d'animer break-inside
, mais cela ne semble fonctionner sur aucun navigateur.
Ce serait de toute façon complètement inutile dans le cas des impressions (valeur avoid-page
)
et peu intéressant dans le cas des mises en page en colonnes ou par régions.
De plus cela nécessiterait des calculs très lourds puisqu'il faudrait recalculer la mise en page complète à chaque étape de l'animation.
Exemple interactif.
La valeur choisie est appliquée sur chacun des paragraphes à l'intérieur du cadre de démonstration, et non pas sur le cadre container.
Vous pouvez redimensionner ce dernier pour observer l'effet de la propriété break-inside
.
Prise en charge par les navigateurs (compatibilité).
La gestion des sauts de colonnes et des sauts de pages ne présente plus trop de problèmes sur les navigateurs actuels. Mais la gestion des régions n'est encore prise en charge par aucun des navigateurs (2022).
break-inside
dans le contexte des pages imprimées.
avoid-page
dans le contexte des pages imprimées (éviter les sauts de page).
break-inside
dans le contexte d'une mise en page multi-colonnes.
avoid-column
dans le contexte d'une mise en page multi-colonnes (éviter les sauts de colonne).
break-inside
(Page)
avoid-page
(Page)
break-inside
(Columns)
avoid-column
(Columns)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que break-inside
.
Les spécifications CSS éditées par le W3C sont organisées en modules. break-inside
fait partie du Module CSS - Fragmentation (CSS Fragmentation Module). Les définitions suivantes sont également décrites dans ce même module.