La propriété CSS break-inside définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.

/* Valeurs avec un mot-clé */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

/* Valeurs globales */
break-inside: inherit;
break-inside: initial;
break-inside: unset;

Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de break-after de l'élément précédent, la valeur de break-before de l'élément suivant et la valeur de break-inside de l'élément englobant.

Pour déterminer si on a une rupture, on applique les règles suivantes :

  1. Si l'une des trois valeurs correspond à une rupture forcée (always, left, right, page, column ou region), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, break-before l'emporte sur break-after qui l'emporte sur break-inside).
  2. Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (avoid, avoid-page, avoid-region ou avoid-column), aucune rupture ne sera appliquée à cet endroit.

Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.

Syntaxe

La propriété break-inside se définit avec un mot-clé parmi ceux de la liste ci-après.

Valeurs

auto
Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
avoid
Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.
avoid-page
Cette valeur interdit toute rupture de page au sein de la boîte.
avoid-column
Cette valeur interdit toute rupture de colonne au sein de la boîte.
avoid-region
Cette valeur interdit toute rupture de région au sein de la boîte.

Syntaxe formelle

auto | avoid | avoid-page | avoid-column | avoid-region

Synonymes pour page-break-inside

Pour des raisons de compatibilité, la propriété historique page-break-inside devrait être traitée par les navigateurs comme break-inside. De cette façon, cela permet aux sites qui utilisaient page-break-inside de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :

page-break-inside break-inside
auto auto
avoid avoid

Exemples

CSS

.exemple {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

p {
  break-inside: avoid-column;
  /* Pour Firefox : */
  page-break-inside: avoid;
  /* Pour WebKit : */
  -webkit-column-break-inside: avoid;
}

HTML

<div class="exemple">
  <p>« Mais alors, » pensa Alice, « ne serai-je donc
  jamais plus vieille que je ne le suis maintenant ?
  D’un côté cela aura ses avantages, ne jamais être
  une vieille femme. Mais alors avoir toujours des
  leçons à apprendre ! Oh, je n’aimerais pas cela du
  tout. »</p>
  <p>« Oh ! Alice, petite folle, » se répondit-elle.
  « Comment pourriez-vous apprendre des leçons ici ?
  Il y a à peine de la place pour vous, et il n’y en
  a pas du tout pour vos livres de leçons. »</p>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Fragmentation Module Level 3
La définition de 'break-inside' dans cette spécification.
Candidat au statut de recommandation Aucune modification.
CSS Regions Module Level 1
La définition de 'break-inside' dans cette spécification.
Version de travail Ajout de la gestion des ruptures de région.
CSS Multi-column Layout Module
La définition de 'break-inside' dans cette spécification.
Version de travail Définition initiale.
Valeur initialeauto
Applicabilitééléments de type bloc
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Prise en charge pour une disposition multi-colonnes

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Multi-column LayoutChrome Support complet 50Edge Support complet 12Firefox Support complet 65IE Support complet 10Opera Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari Support complet 10WebView Android Support complet 50Chrome Android Support complet 50Firefox Android Support complet 65Opera Android Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari iOS Support complet 10Samsung Internet Android Support complet 5.0
column and avoid-columnChrome Support complet 50Edge Support complet 12Firefox Aucun support NonIE Support complet 10Opera Support complet 37Safari Support complet 10WebView Android Support complet 50Chrome Android Support complet 50Firefox Android Aucun support NonOpera Android Support complet 37Safari iOS Support complet 10Samsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Prise en charge pour les média paginés

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Supported in Paged MediaChrome Support complet 50Edge Support complet 12Firefox Support complet 65IE Support complet 10Opera Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari Support complet 10WebView Android Support complet 50Chrome Android Support complet 50Firefox Android Support complet 65Opera Android Support complet 37
Support complet 37
Aucun support 11.1 — 12.1
Safari iOS Support complet 10Samsung Internet Android Support complet 5.0
page and avoid-pageChrome Support complet 51Edge Support complet 12Firefox Aucun support NonIE Aucun support NonOpera Support complet 38
Support complet 38
Aucun support 11.1 — 12.1
Safari Aucun support NonWebView Android Support complet 51Chrome Android Support complet 51Firefox Android Aucun support NonOpera Android Support complet 41
Support complet 41
Aucun support 11.1 — 12.1
Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Notes relatives à la compatibilité

Avant Firefox 65, l'ancienne propriété page-break-inside fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.

Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée -webkit-column-break-inside afin de contrôler les ruptures de colonne.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, edspeedy
Dernière mise à jour par : SphinxKnight,