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 :

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

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.

  • break-inside: inherit | initial | unset;

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

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Afficher les versions antérieures   Afficher la version à venir  

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 couleurs
  • orphans : 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.