CSS - Propriété break-inside
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 break-inside
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: 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.
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.
-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
La valeur choisie est appliquée sur chacun des paragraphes à l'intérieur du cadre de démonstration
(et non pas sur le cadre dans son ensemble).
Vous pouvez redimensionner ce dernier pour observer l'effet de la propriété break-inside
.
break-inside
:
Prise en charge par les navigateurs (compatibilité).
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Colonnes multiples - Propriétés.
break-after
: Interdit ou impose des sauts (page, colonne...) après l'élément.break-before
: Interdit ou impose des sauts (page, colonne...) avant l'élément.column-count
: Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.column-fill
: Gère la répartition du contenu entre les colonnes.column-gap
: Définit l'espacement entre les colonnes.column-rule
: Définit tous les paramètres du trait de séparation entre les colonnes.column-rule-color
: Définit la couleur des lignes de séparation de colonnes.column-rule-style
: Choisit le type de trait pour la séparation des colonnes.column-rule-width
: Définit l'épaisseur du trait de séparation entre les colonnes.column-span
: Gère le chevauchement du contenu sur plusieurs colonnes.column-width
: Définit la largeur des colonnes.columns
: Définit les caractéristiques d'une mise en page sur plusieurs colonnes.orphans
: Gestion des coupures en bas de page.widows
: Gestion des ruptures en haut de page.
Impression - Propriétés.
bleed
:break-after
: Interdit ou impose des sauts (page, colonne...) après l'élément.break-before
: Interdit ou impose des sauts (page, colonne...) avant l'élément.color-adjust
: Autorise ou non le navigateur à optimiser les couleursorphans
: Gestion des coupures en bas de page.size
: Dimensions et orientation des pages imprimées.widows
: Gestion des ruptures en haut de page.
Impression - Directives.
@page
: Caractéristiques de la page, à l'impression.