Propriété CSS break-before

La propriété break-before définit comment les sauts de page ou de colonne doivent se comporter avant la boîte générée. Si l'élément ne génère pas de boîte, la propriété n'a aucun effet. Elle prend en charge des valeurs telles que auto, avoid, always, page, column, left et right.

Les page-break-inside, page-break-after et page-break-before propriétés aident à définir comment un document doit apparaître lors de l'impression.

Lorsque plusieurs propriétés de saut s'appliquent au même élément, les sauts forcés (page, column, left, right, always) prennent le pas sur les sauts à éviter. La propriété break-before s'applique à l'élément lui-même, tandis que break-inside s'applique à sa boîte principale.

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

Syntaxe

Syntaxe de la propriété CSS break-before

css

break-before: auto | avoid | always | page | column | left | right | initial | inherit;

Exemple de la propriété break-before :

Exemple de la propriété CSS break-before avec la valeur avoid

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .multicol {
        background-color: #eee;
        padding: 10px;
        column-count: 3;
        column-rule: 2px dotted #ccc;
      }
      .multicol hr {
        break-before: avoid;
      }
    </style>
  </head>
  <body>
    <h2>Break-before example</h2>
    <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

Valeurs de la propriété CSS break-before

Valeurs

Valeur	Description
auto	Défaut. Autorise tout saut avant la boîte principale.
avoid	Évite tout saut avant la boîte principale.
always	Force un saut avant la boîte principale.
page	Force un saut de page avant la boîte principale.
column	Force un saut de colonne avant la boîte principale.
left	Force un ou deux sauts de page avant la boîte principale afin que la page suivante soit mise en forme comme une page de gauche.
right	Force un ou deux sauts de page avant la boîte principale afin que la page suivante soit mise en forme comme une page de droite.
initial	Définit cette propriété sur sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Pratique

Quelle est la fonction de la propriété CSS 'break-before' ?

Elle crée un saut avant un élément.Elle change la couleur d'un élément.Elle crée un saut après un élément.Elle influence les sauts de page, de colonne ou de région avant la génération d'un élément.Elle modifie la forme d'un élément.

Propriété CSS break-before ​

Syntaxe ​

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

Résultat ​