Propriété CSS break-after

La propriété CSS break-after contrôle le comportement d'une rupture de fragmentation après une boîte donnée. Une rupture de fragmentation est le point où le contenu est divisé en deux fragments — deux pages imprimées, deux colonnes d'une mise en page multicolonne, ou deux régions CSS. Avec break-after, vous pouvez forcer une rupture (« commencer la section suivante sur une nouvelle page/colonne ») ou l'empêcher (« maintenir ce titre attaché au texte qui le suit »).

Elle prend en charge les valeurs suivantes : auto, avoid, always, all, page, column, region, avoid-page, avoid-column et avoid-region.

Lorsqu'elle est appliquée à un élément situé dans un conteneur multicolonne lui-même dans un contexte paginé, always (et all) force à la fois une rupture de colonne et une rupture de page à la même limite.

Quand utiliser break-after

Utilisez break-after lorsque le flux naturel du contenu se diviserait à un endroit inapproprié :

Feuilles de style d'impression. Commencez chaque section de premier niveau sur une nouvelle feuille de papier avec break-after: page, ou empêchez un total de facture d'être isolé en haut de la page suivante.
Texte multicolonne. Poussez un sous-titre vers le haut de la colonne suivante plutôt que de le laisser en bas de la colonne actuelle.
Régions CSS / visionneuses de médias paginés. Contrôlez la façon dont le contenu s'écoule d'un conteneur à l'autre.

break-after n'a d'effet qu'à l'intérieur d'un contexte de fragmentation — un document imprimé/paginé, un conteneur column-count/column-width, ou une chaîne de régions. Sur une page à défilement ordinaire, elle n'a aucun effet visible, c'est pourquoi l'exemple ci-dessous utilise un conteneur multicolonne.

Résolution des propriétés de rupture

Chaque limite d'élément est influencée par trois propriétés :

break-after sur l'élément précédent.
break-before sur l'élément actuel.
break-inside sur l'élément parent.

Lorsque plusieurs propriétés de rupture s'appliquent, les règles de résolution suivantes déterminent le résultat :

Les ruptures forcées (par exemple, page, column, always) ont la priorité sur les ruptures évitées.
Si plusieurs ruptures forcées s'appliquent, break-before a la priorité sur break-after, qui a la priorité sur break-inside.
Si une valeur applicable est une rupture évitée (avoid, avoid-page, avoid-column ou avoid-region), la rupture ne sera pas appliquée.

Valeur initiale	auto
S'applique à	Les éléments de niveau bloc.
Hérité	Non.
Animatable	discrete
Version	CSS3
Syntaxe DOM	object.style.breakAfter = "always";

Syntaxe

Syntaxe de la propriété CSS break-after

break-after: auto | avoid | always | all | page | column | region | avoid-page | avoid-column | avoid-region | initial | inherit;

Exemple de break-after avec une rupture de colonne

Dans un conteneur à trois colonnes, l'élément <hr> reçoit break-after: column. Au lieu de laisser les colonnes s'équilibrer automatiquement, le navigateur termine la colonne actuelle juste après le séparateur et continue le reste du contenu dans la colonne suivante — ainsi, le deuxième bloc « Lorem ipsum » commence toujours en haut d'une nouvelle colonne.

<!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-after: column;
      }
    </style>
  </head>
  <body>
    <h2>Break-after property example</h2>
    <div class="multicol">
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
      <hr />
      <h2>Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis, arcu ut pulvinar sollicitudin, enim purus mollis tellus, et porta elit sem in nulla. Integer a magna eget justo convallis porta. Vestibulum lacinia eget leo sed elementum. Quisque dapibus ullamcorper quam, at pretium quam eleifend a. Donec sit amet blandit risus. Nunc tempus tellus vitae nibh pellentesque imperdiet. Ut pulvinar rhoncus velit, ut euismod odio ornare vel.</p>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de break-after avec une rupture de page

Il s'agit de l'utilisation réelle la plus courante : une feuille de style d'impression qui commence chaque chapitre sur sa propre page. Ouvrez l'aperçu avant impression de votre navigateur (Ctrl/Cmd + P) pour voir chaque <section> commencer sur une nouvelle feuille.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      @media print {
        section {
          break-after: page;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Chapter 1</h2>
      <p>This chapter prints on its own page.</p>
    </section>
    <section>
      <h2>Chapter 2</h2>
      <p>Because the previous section has break-after: page,
         this chapter starts at the top of the next printed page.</p>
    </section>
    <section>
      <h2>Chapter 3</h2>
      <p>And so does this one.</p>
    </section>
  </body>
</html>

Valeurs

Valeur	Description
auto	Autorise toute rupture (page, colonne, région) après la boîte principale.
avoid	Évite toute rupture après la boîte principale.
always	Force une rupture après la boîte principale.
all	Force une rupture après la boîte principale et toutes les boîtes englobantes du même type (par exemple, toutes les colonnes ou toutes les pages).
page	Force une rupture de page après la boîte principale.
column	Force une rupture de colonne après la boîte principale.
region	Force une rupture de région après la boîte principale.
avoid-page	Évite une rupture de page après la boîte principale.
avoid-column	Évite une rupture de colonne après la boîte principale.
avoid-region	Évite une rupture de région après la boîte principale.
initial	Définit cette propriété à sa valeur par défaut.
inherit	Hérite cette propriété de son élément parent.

Propriétés associées

break-before — contrôle la rupture avant une boîte (a la priorité sur break-after à la même limite).
break-inside — empêche une seule boîte d'être divisée sur plusieurs fragments.
page-break-after — l'ancien alias uniquement pour l'impression, conservé pour la compatibilité ascendante.
columns et column-count — définissent le contexte multicolonne dans lequel les ruptures de colonne s'appliquent.

Pratique

Lesquelles des valeurs suivantes sont valides pour la propriété CSS 'break-after' ?