Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

break-inside

La propriété 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.

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

Valeur initialeauto
Applicabilitééléments de type bloc
Héritéenon
Médiapaged
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

Valeurs

auto
Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).
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

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  
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.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple Pas de support [*] Pas de support 10 11.10 Pas de support [*]
column, avoid-column Pas de support [*] Pas de support 10 11.10 Pas de support [*]
recto, verso Pas de support Pas de support Pas de support Pas de support Pas de support
region, avoid-region Pas de support [*] Pas de support Pas de support Pas de support Pas de support [*]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple Pas de support [*] Pas de support ? ? Pas de support [*]
column, avoid-column Pas de support [*] Pas de support ? ? Pas de support [*]
recto, verso Pas de support Pas de support Pas de support Pas de support Pas de support
region, avoid-region Pas de support [*] Pas de support Pas de support Pas de support Pas de support[*]

[*] Les navigateurs basés sur WebKit et Blink ne prennent pas en charge cette propriété mais utilisent les versions non-standards -webkit-column-break-before et -webkit-region-break-before avec des valeurs similaires à celles de page-break-before.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,