La propriété CSS page-break
La propriété CSS page-break regroupe trois propriétés : page-break-before, page-break-after et page-break-inside. Découvrez leur usage avec des exemples.
Il n'existe pas de propriété page-break unique dans la spécification CSS. Ce nom désigne une famille de trois propriétés liées : page-break-before, page-break-after et page-break-inside. Ensemble, elles contrôlent l'emplacement des sauts de page lorsqu'un document est envoyé à une imprimante (ou enregistré en PDF), afin de garder le contenu connexe ensemble et d'éviter de diviser des titres, des tableaux ou des images sur deux feuilles.
Ces propriétés ne prennent effet que dans les médias paginés — impression ou aperçu avant impression. Elles n'ont aucun résultat visible sur un écran normal, c'est pourquoi on les définit presque toujours dans un bloc @media print. Elles n'ont également aucun effet sur un <div> vide ni sur les éléments positionnés en absolu.
Cette page couvre les trois propriétés, les situations où les utiliser, ainsi que les remplaçants modernes à privilégier dans tout nouveau code.
Quand les utiliser ?
Raisons courantes de contrôler les sauts de page :
- Commencer chaque section sur une nouvelle page — par exemple, forcer un saut de page avant chaque
<h1>dans un long rapport. - Garder des blocs ensemble — empêcher un tableau, une figure ou un bloc de code d'être divisé sur deux pages.
- Éviter les titres orphelins — un titre qui se retrouve tout en bas d'une page avec son contenu sur la suivante donne un rendu cassé.
Remplaçants modernes : les propriétés break-*
Les propriétés page-break-* sont héritées du passé. La spécification CSS Fragmentation les a remplacées par les propriétés plus courtes break-before, break-after et break-inside, qui fonctionnent également pour les mises en page multi-colonnes et en régions — pas seulement pour l'impression. Les navigateurs prennent toujours en charge les anciens noms pour la compatibilité ascendante et les mappent sur les nouveaux, donc l'approche la plus robuste consiste à déclarer les deux :
@media print {
h1 {
page-break-before: always; /* legacy */
break-before: page; /* modern equivalent */
}
}Le reste de cette page présente chaque propriété héritée à côté de son équivalent moderne.
page-break-after
page-break-after ajoute un saut de page après un élément. Par exemple, terminer un chapitre pour que le suivant commence sur une nouvelle feuille :
La propriété page-break-after est remplacée par la propriété break-after.
Exemple de code CSS pour page-break-after
@media print {
.chapter {
page-break-after: always;
/* modern equivalent: break-after: page; */
}
}page-break-before
page-break-before ajoute un saut de page avant un élément — pratique pour faire commencer chaque titre principal sur une nouvelle page :
La propriété page-break-before est remplacée par la propriété break-before.
Exemple de code CSS pour page-break-before
@media print {
h2 {
page-break-before: always;
/* modern equivalent: break-before: page; */
}
}Les valeurs left et right sont utiles pour l'impression recto-verso : elles forcent suffisamment de sauts pour que l'élément suivant commence sur une page de gauche ou de droite respectivement.
page-break-inside
page-break-inside contrôle si un saut est autorisé à l'intérieur d'un élément. Utilisez avoid pour empêcher un tableau, une figure ou un paragraphe d'être divisé sur deux pages. Cette propriété n'accepte que auto et avoid.
La propriété page-break-inside est remplacée par la propriété break-inside.
Exemple de la propriété break-inside :
L'exemple suivant utilise la propriété moderne break-inside, qui remplace la propriété obsolète page-break-inside.
Exemple des propriétés CSS page-break et break-inside|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| auto | Laisse le navigateur décider où effectuer le saut. Il s'agit de la valeur par défaut. |
| always | Force toujours un saut de page (avant ou après l'élément). |
| avoid | Évite un saut de page (avant, après ou à l'intérieur de l'élément). |
| left | Force un ou deux sauts pour que le contenu suivant commence sur une page de gauche. |
| right | Force un ou deux sauts pour que le contenu suivant commence sur une page de droite. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite de la propriété de son élément parent. |
Quelles valeurs s'appliquent à quelle propriété :
| Propriété | Valeurs acceptées |
|---|---|
page-break-before | auto, always, avoid, left, right |
page-break-after | auto, always, avoid, left, right |
page-break-inside | auto, avoid |
Sujets connexes
break-after— le remplaçant moderne depage-break-after.break-inside— le remplaçant moderne depage-break-inside.@media— utilisé pour cibler la sortie imprimée avec@media print.columns— mise en page multi-colonnes, oùbreak-insideest également utile.