Propriété CSS break-inside
La propriété CSS break-inside définit si une rupture à l'intérieur de la boîte principale est autorisée, évitée ou forcée. Exemples inclus.
La propriété CSS break-inside contrôle si une rupture de fragmentation (rupture de page, de colonne ou de région) est autorisée à se produire à l'intérieur de la boîte d'un élément. Utilisez-la pour maintenir un contenu groupé afin qu'il ne soit pas divisé entre deux pages imprimées ou deux colonnes d'une mise en page multi-colonnes.
Un exemple courant et pratique : dans un article multi-colonnes, vous ne souhaitez pas qu'une figure, un bloc de code ou un titre suivi de son premier paragraphe soit coupé en deux, avec une moitié dans une colonne et l'autre moitié dans la suivante. Définir break-inside: avoid sur cet élément indique au navigateur de déplacer l'ensemble de la boîte vers la colonne ou la page suivante plutôt que de la diviser.
Cette propriété s'applique uniquement dans les contextes fragmentés, c'est-à-dire lorsque le contenu s'étend réellement sur plusieurs fragments :
- Impression (
@media print), où le contenu est réparti sur plusieurs pages. - Mises en page multi-colonnes, où le contenu s'écoule sur plusieurs colonnes (voir
column-count). - Régions CSS (la valeur
avoid-region), une ancienne spécification très peu prise en charge.
Lorsque le contenu n'est pas fragmenté (un bloc normal à l'écran), break-inside n'a aucun effet visible.
Chaque limite d'élément est contrôlée par trois propriétés associées :
- Break-after, qui s'applique à l'élément précédent.
- Break-before, qui s'applique à l'élément suivant.
- Break-inside, qui s'applique à l'élément conteneur.
La spécification de fragmentation CSS gère le comportement des ruptures comme suit :
- Les ruptures forcées (par exemple
always,left,right) spécifiées parbreak-beforeoubreak-afteront la priorité et se produiront. - Si aucune rupture forcée n'est déclenchée,
break-insidedétermine si le navigateur tente d'éviter une rupture à l'intérieur de l'élément. Le définir suravoidempêche les ruptures de page, de colonne ou de région dans la boîte.
| Valeur initiale | auto |
|---|---|
| S'applique à | éléments de niveau bloc. |
| Héritage | Non. |
| Animatable | Discret. |
| Version | CSS3 |
| Syntaxe DOM | object.style.breakInside = "avoid"; |
Syntaxe
Syntaxe de la propriété CSS break-inside
break-inside: auto | avoid | avoid-page | avoid-column | avoid-region | initial | inherit;Exemple de la propriété break-inside :
Exemple de la propriété CSS break-inside avec la valeur avoid
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.multicol {
background-color: #eee;
padding: 10px;
/* Safari and Chrome */
-webkit-column-count: 3;
-webkit-column-rule: 2px dotted #ccc;
/* Firefox */
-moz-column-count: 3;
-moz-column-rule: 2px dotted #ccc;
/* CSS3 */
column-count: 3;
column-rule: 2px dotted #ccc;
}
.multicol hr {
break-inside: avoid;
}
</style>
</head>
<body>
<div class="multicol">
<h2>Lorem ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<hr />
<h2>Lorem ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>
</html>Résultat
![Propriété CSS break-inside](https://api.w3docs.com/uploads/media/default/0001/03/e03a2e39ef51e5dd859aa1ab137e06e33638a3ba.png "Propriété CSS break-inside" =420x)
Dans l'exemple ci-dessus, les trois colonnes contiennent chacune un titre et un paragraphe, et le <hr> porte break-inside: avoid afin que le séparateur ne soit jamais coupé entre les colonnes.
Valeurs
| Valeur | Description |
|---|---|
| auto | Par défaut. Autorise les ruptures normales de page, de colonne ou de région à l'intérieur de l'élément. |
| avoid | Évite toute rupture de page, de colonne ou de région à l'intérieur de l'élément. |
| avoid-page | Évite une rupture de page à l'intérieur de l'élément. |
| avoid-column | Évite une rupture de colonne à l'intérieur de l'élément. |
| avoid-region | Évite une rupture de région à l'intérieur de l'élément. |
| initial | Définit la propriété à sa valeur par défaut (auto). |
| inherit | Hérite la propriété de l'élément parent. |
Compatibilité des navigateurs
break-inside avec les valeurs auto et avoid est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari). Les mots-clés avoid-page et avoid-column bénéficient d'un support moins uniforme, et avoid-region est pratiquement non pris en charge car les régions CSS n'ont jamais été largement déployées. Pour des résultats fiables et compatibles entre navigateurs, préférez break-inside: avoid.
Dans le code lié à l'impression, vous pouvez encore rencontrer l'ancienne propriété page-break-inside: avoid;. Il s'agit de l'équivalent historique de break-inside: avoid, conservé pour la rétrocompatibilité. Il est donc courant de déclarer les deux :
.keep-together {
page-break-inside: avoid; /* legacy */
break-inside: avoid; /* modern */
}