Break-inside - Propriété CSS

break-inside

Résumé des caractéristiques de la propriété break-inside

Description rapide
Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | avoid | avoid-column | avoid-page | avoid-region
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété break-inside passe d'une valeur à l'autre sans transition. (1)
Module W3C
Module CSS - Fragmentation
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

(1) Dans la pratique l'animation n'est pas gérée (voir plus bas).

Schéma de la syntaxe de break-inside.

break-inside - Syntax DiagramSyntax diagram of the break-inside CSS property. See stylescss.free.fr for details. auto auto avoid avoid avoid-page avoid-page avoid-column avoid-column avoid-region avoid-regionbreak-inside:;break-inside:;
Schéma syntaxique de la propriété break-inside.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété break-inside.

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.
Élément parent
Élément 1
É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.

Valeurs 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.

    Pour plus de détails sur la mise en page sur plusieurs colonnes, consultez la page sur les 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; (auto) break-inside: inherit; break-inside: revert; break-inside: revertLayer; break-inside: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de 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 avec la propriété break-inside.

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.

break-inside :
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.

Compatibilité des navigateurs avec break-inside.

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 (2025).

Colonne 1
Prise en charge de la propriété break-inside dans le contexte des pages imprimées.
Colonne 2
Support de la valeur avoid-page pour la propriété break-inside dans le contexte de pages imprimées (éviter les sauts de page).
Colonne 3
Support de la propriété break-inside dans le contexte d'une mise en page en colonnes (éviter le saut de colonnes).
1
Propriété
break-inside
(pages)
2
Valeur
avoid-page
(pages)
3
Propriété
break-inside
(colonnes)
Estimation de la prise en charge globale.
95%
78%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Histoire de la propriété break-inside.

Voir aussi, dans la spécification "Module CSS - Fragmentation".

La spécification CSS Fragmentation Module regroupe tout ce qui concerne la fragmentation : sauts de page, de colonnes, segmentation d'un élément sur deux pages ou deux colonnes, etc.

Propriétés :

box-decoration-break
Gestion de la présentation des éléments fragmentés sur plusieurs lignes.
break-after
Interdit ou impose des sauts (de page, de colonne...) après l'élément.
break-before
Interdit ou impose des sauts (de page, de colonne...) avant l'élément.
orphans
Définit le nombre de lignes qui doivent rester en base de page ou de colonne, dans chaque paragraphe.
widows
Définit le nombre de lignes qui doivent rester en haut des pages ou des colonnes.