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 en mode discrete, mais cela ne semble semble pas présenter beaucoup d'intérêt. C'est même complètement inutile dans le cas des impressions (valeur avoid-page). De plus cela nécessite des calculs très lourds puisqu'il faut recalculer la mise en page complète à chaque étape de l'animation.

Le concept de feuilles de styles date d'une trentaine d'années environ. Celles-ci sont maintenant gérées par CSS (Cascading Styles Sheet).
A partir de sa création, le langage CSS s'enrichit rapidement de nouvelle possibilités : alors que CSS1 définit surtout le rendu typographique du texte, CSS2 apporte plus de 70 nouvelles propriétés touchant à tous les domaines de la mise en forme.
Dès cet instant il devient difficile de publier le standard CSS en une seule fois, le W3C décide alors de faire évoluer le langage module par module, chaque module ayant son propre numéro de version.

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.

Pour ce qui est de la valeur avoid-page, vous verrez peut-être son effet, en aperçu avant impression, sur le schéma syntaxique. Il ne doit pas être coupé par un saut de page, alors qu'il l'est avec la valeur auto.

break-inside :
Le concept de feuilles de styles date d'une trentaine d'années environ. Celles-ci sont maintenant gérées par CSS (Cascading Styles Sheet), un langage déclaratif permettant d'écrire des feuilles de styles assurant la mise en forme et la mise en page des documents [HTML}, XML, SVG, ou d'autre documents encore.
Le langage CSS s'enrichit rapidement de nouvelle possibilités, à la demande des web designers et des créateurs de sites web. Alors que CSS1 définit surtout le rendu typographique du texte, CSS2 apporte plus de 70 nouvelles propriétés touchant à tous les domaines de la mise en forme.
Dès cet instant il devient difficile de publier le standard CSS en une seule fois, le W3C décide alors de faire évoluer le langage module par module, chaque module ayant son propre numéro de version.

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.

  • Module CSS - Mise en page multi-colonnes - Niveau 1

    Cette spécification décrit la mise en page sur plusieurs colonnes. Il suffit de définir le nombre de colonnes sur le conteneur, et le contenu se disposera sur le nombre de colonnes indiqué. Bien entendu d'autres propriétés permettent d'agir plus finement sur les conteneur multi-colonnes.
    Cette spécification définit également des propriétés concernant l'espace entre les colonnes et le trait de séparation éventuel.

    Concernant break-inside. Définition de la propriété break-inside dans le contexte d'une mise en page multi-colonnes
    WD
    23 Juin 1999
    Document de travail.
    CR
    17 Décembre 2009
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Fragmentation - Niveau 3

    Concernant break-inside. Introduction de la propriété break-inside pour la gestion des sauts de colonne, de page, ou de région.
    WD
    28 Février 2012
    Document de travail.
    CR
    14 Janvier 2016
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Fragmentation - Niveau 4

    Concernant break-inside. Pas de changement concernant la propriété break-inside.
    WD
    18 Décembre 2018
    Document de travail.
    CR
    PR
    REC

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

La spécification module CSS - Fragmentation 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.
Break-inside
Définit si les sauts de colonne, de page, etc. sont permis dans 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.