Propriété break-inside CSS

Définition et utilisation

L'attribut break-inside détermine si une pagination (page-break), une division en colonnes (column-break) ou une division en régions (region-break) doit avoir lieu à l'intérieur de l'élément spécifié.

L'attribut break-inside étend l'attribut page-break-inside du CSS2.

En utilisant break-inside, vous pouvez informer le navigateur d'éviter les interruptions dans les images, les fragments de code, les tableaux et les listes.

Exemples

Éviter la pagination à l'intérieur de l'élément <img> :

@media print {
  img {
    display: block;
    break-inside: avoid;
  }
}

Syntaxe CSS

break-inside: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Valeur de l'attribut

Valeur Description
auto Par défaut. La pagination, la division en colonnes et en régions est effectuée automatiquement à l'intérieur de l'élément.
avoid Éviter les interruptions de page, de colonnes ou de régions à l'intérieur de l'élément.
avoid-column Éviter la division en colonnes à l'intérieur de l'élément.
avoid-page Éviter la pagination à l'intérieur de l'élément.
avoid-region Éviter la division de l'élément en régions.
initial Sets this property to its default value. See : initial。
inherit Inherits this property from its parent element. See : inherit。

Détails techniques

Valeur par défaut : auto
Héritage : Non
Réalisation des animations : Non pris en charge. Voir :Propriétés liées aux animations。
Version : CSS3
Syntaxe JavaScript : object.style.breakInside="always"

Plus d'exemples

Éviter la pagination à l'intérieur des éléments <table>, <ul>, <ol> :

@media print {
  table, ul, ol {
    break-inside: avoid;
  }
}

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version la plus ancienne du navigateur qui prend en charge cette propriété en totalité.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0