Propriété CSS break-before

La propriété CSS break-before contrôle si un saut de page, de colonne ou de région doit être inséré avant un élément. C'est le remplaçant moderne et multi-contexte de la propriété page-break-before réservée à l'impression : le même mot-clé fonctionne désormais pour les médias paginés (impression/PDF), les mises en page multi-colonnes (column-count) et les régions CSS.

Cette page explique ce que fait break-before, dans quels cas chaque valeur est utile, comment elle interagit avec les règles de saut voisines, ainsi qu'un exemple exécutable.

Pourquoi break-before est important

Deux problèmes de mise en page très différents nécessitent le même type de contrôle :

Impression. Lorsqu'un long document est envoyé à une imprimante ou exporté en PDF, le navigateur décide où une page se termine et où la suivante commence. break-before: page permet de forcer une nouvelle feuille — par exemple, pour que chaque titre de chapitre <h1> commence en haut d'une nouvelle page.
Texte multi-colonnes. Dans une mise en page column-count, le contenu s'écoule d'une colonne à la suivante. break-before: column force un titre ou une figure à commencer une toute nouvelle colonne plutôt que d'être relégué en bas de la précédente.

Le mot-clé avoid fait l'inverse : il demande au navigateur de ne pas effectuer de saut juste avant l'élément, ce qui permet de garder un titre accolé au paragraphe qui le suit.

Comment break-before est calculé

Lorsque deux éléments adjacents demandent chacun un saut (l'un avec break-after, l'autre avec break-before), le navigateur les combine et le saut le plus fort l'emporte :

Les sauts forcés (always, page, column, left, right) se produisent toujours.
avoid n'est qu'une indication — le navigateur peut tout de même effectuer un saut s'il n'a pas d'autre choix (par exemple, un élément plus grand qu'une seule page).
Si aucun côté ne force un saut, auto laisse le navigateur décider.

Notez que break-before ne prend effet que sur les éléments qui génèrent une boîte et se trouvent dans un contexte de fragmentation (un document imprimé, un conteneur multi-colonnes ou une région). Sur une page normale à une seule colonne affichée à l'écran, il n'a aucun effet visible.

Propriétés associées

break-after — le même contrôle sur le bord arrière d'un élément.
break-inside — empêche qu'un élément (une ligne de tableau, une figure, une carte) soit divisé par un saut.
columns et column-rule — configurent la mise en page multi-colonnes dans laquelle break-before: column opère.

Valeur initiale	auto
S'applique à	Éléments de niveau bloc.
Hérité	Non.
Animatable	Discret.
Version	CSS3
Syntaxe DOM	object.style.breakBefore = "auto";

Syntaxe

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

Exemple : éviter un saut dans une mise en page multi-colonnes

Dans le bloc multi-colonnes ci-dessous, le <hr> entre les deux sections définit break-before: avoid, demandant au navigateur de ne pas commencer une nouvelle colonne juste avant la règle. Redimensionnez le résultat pour que le texte se répartisse en trois colonnes afin de voir l'effet :

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

Essayez vous-même »

Résultat

Exemple : forcer un saut de page à l'impression

Une exigence courante pour l'impression est de commencer chaque chapitre sur sa propre page. Appliquez break-before: page au titre du chapitre et la règle prend effet dans l'aperçu avant impression (Ctrl/Cmd + P) ou lors de l'exportation en PDF :

.chapter {
  break-before: page;
}

<h1 class="chapter">Chapter 1</h1>
<p>Intro text…</p>

<h1 class="chapter">Chapter 2</h1>
<p>This heading begins on a new printed page.</p>

Comme le saut ne s'applique qu'aux médias paginés, il n'a aucun effet sur un écran à défilement normal — ouvrez la boîte de dialogue d'impression pour le voir.

Valeurs

Valeur	Description
auto	Par 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 formatée comme une page gauche.
right	Force un ou deux sauts de page avant la boîte principale afin que la page suivante soit formatée comme une page droite.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Pratique

Que fait 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 qu'un élément soit généré.Elle modifie la forme d'un élément.