Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
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. Dans la pratique l'animation n'est pas gérée (voir plus bas).
Module W3C
Module CSS - Fragmentation
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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.
É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 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:
Schéma syntaxique de la propriété break-insideSyntaxe de la propriété CSS break-inside, gestion des ruptures. auto auto avoid avoid avoid-page avoid-page avoid-column avoid-column avoid-region avoid-region
;
  • 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.

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.

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

Colonne 1
Prise en charge de la propriété break-inside dans le contexte des pages imprimées.
Colonne 2
Prise en charge de la valeur avoid-page dans le contexte des pages imprimées (éviter les sauts de page).
Colonne 3
Prise en charge de la propriété break-inside dans le contexte d'une mise en page multi-colonnes.
Colonne 4
Prise en charge de la valeur avoid-column dans le contexte d'une mise en page multi-colonnes (éviter les sauts de colonne).
1
break-inside
(Page)
2
avoid-page
(Page)
3
break-inside
(Columns)
4
avoid-column
(Columns)
Estimation de la prise en charge en pourcentage du parc actuel.
94%
75%
94%
94%

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.

Propriétés.

Gestion de la présentation des éléments fragmentés sur plusieurs lignes.
Interdit ou impose des sauts (page, colonne...) après l'élément.
Interdit ou impose des sauts (page, colonne...) avant l'élément.
Gestion des coupures en bas de page ou de colonne.
Gestion des ruptures en haut de page ou de colonne.