Propriété CSS break-after

La propriété CSS break-after définit comment les sauts de page, de colonne ou de région doivent se comporter après la boîte générée. 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 à l'intérieur d'un conteneur multicolonnes qui se trouve également dans un conteneur de page, elle force à la fois un saut de colonne et un saut de page.

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 saut s'appliquent, les règles de résolution suivantes déterminent le résultat :

Les sauts forcés (par ex. page, column, always) ont la priorité sur les sauts à éviter.
Si plusieurs sauts forcés s'appliquent, break-before prime sur break-after, qui prime sur break-inside.
Si une valeur applicable est un saut à éviter (avoid, avoid-page, avoid-column ou avoid-region), le saut ne sera pas appliqué.

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

Syntaxe

Syntaxe de la propriété CSS break-after

css

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

Exemple de la propriété break-after :

Exemple de la propriété CSS break-after avec la valeur column

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

Try it Yourself »

Résultat

Valeurs de la propriété CSS break-after

Valeurs

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

Pratique

Parmi les valeurs suivantes, lesquelles sont des valeurs possibles pour la propriété 'break-after' en CSS, comme décrit sur la page de référence ?

Propriété CSS break-after ​

Syntaxe ​

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

Résultat ​