Propriété CSS break-inside

La propriété CSS break-inside définit comment les sauts de page, de colonne ou de région doivent se comporter à l'intérieur de la boîte générée. Elle est ignorée lorsque la boîte générée n'est pas spécifiée. Les valeurs valides incluent auto, avoid, avoid-page, avoid-column et avoid-region.

La limite de chaque élément est contrôlée par trois propriétés :

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

La spécification de fragmentation CSS gère le comportement des sauts comme suit :

Les sauts forcés (par ex. always, left, right) spécifiés par break-before ou break-after ont la priorité et se produiront.
Si aucun saut forcé n'est déclenché, break-inside détermine si le navigateur tente d'éviter de couper à l'intérieur de l'élément. La définir sur avoid empêche les sauts de page, de colonne ou de région à l'intérieur de la boîte.

Valeur initiale	auto
S'applique à	éléments de niveau bloc.
Héritée	Non.
Animable	Discrète.
Version	CSS3
Syntaxe DOM	object.style.breakInside = "avoid";

Syntaxe

Syntaxe de la propriété CSS break-inside

css

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

html

<!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>

Try it Yourself »

Résultat

Propriété CSS break-inside

Valeurs

Valeur	Description
auto	Par défaut. Autorise les sauts normaux de page, de colonne ou de région à l'intérieur de l'élément.
avoid	Évite tout saut de page, de colonne ou de région à l'intérieur de l'élément.
avoid-page	Évite un saut de page à l'intérieur de l'élément.
avoid-column	Évite un saut de colonne à l'intérieur de l'élément.
avoid-region	Évite un saut de région à l'intérieur de l'élément.
initial	Définit la propriété sur sa valeur par défaut (`auto`).
inherit	Hérite la propriété de l'élément parent.

Pratique

Que fait la propriété CSS 'break-inside' ?

Elle permet de contrôler les sauts de page/colonne/région qui se produisent à l'intérieur d'une boîteElle contrôle la mise en page d'une page webElle permet de mettre en œuvre des styles de policeElle est utilisée pour empêcher un saut de page/colonne/région de se produire à l'intérieur d'un élémentElle est utilisée pour spécifier les marges d'un élément

Propriété CSS break-inside ​

Syntaxe ​

Exemple de la propriété break-inside : ​

Résultat ​

Valeurs ​

Pratique ​

Propriété CSS break-inside

Syntaxe

Exemple de la propriété break-inside :

Résultat

Valeurs

Pratique