Propriété CSS page-break-after
La propriété CSS page-break-after définit un saut de page après un élément spécifié. Découvrez les valeurs de cette propriété.
La propriété CSS page-break-after contrôle si un saut de page est forcé ou évité après un élément donné lorsque le document est imprimé ou affiché dans un contexte de média paginé (impression, export PDF, aperçu avant impression). Un saut de page termine la page courante et pousse le contenu suivant sur une nouvelle page.
Sur un écran normal, le contenu web défile en un flux continu, il n'y a donc rien à couper. Mais lorsque cette même page est envoyée à une imprimante ou enregistrée en PDF, le navigateur doit décider où une feuille de papier se termine et où la suivante commence. page-break-after vous permet d'influencer ces décisions — par exemple, pour commencer chaque nouveau chapitre en haut d'une nouvelle page, ou pour éviter qu'un titre se retrouve seul en bas d'une page.
La propriété n'a aucun effet visible à l'écran ; vous la placez généralement à l'intérieur d'un bloc @media print pour que les règles ne s'appliquent qu'à l'impression. Elle ne s'applique pas aux éléments positionnés en absolu.
page-break-after est déprécié. Il a été remplacé par la propriété break-after, plus polyvalente, qui fonctionne également avec les mises en page multi-colonnes et en régions. Pour tout nouveau code, préférez break-after. Les navigateurs traitent page-break-after comme un alias de break-after, les sites existants continuent donc de fonctionner.
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments de niveau bloc. |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS2 |
| Syntaxe DOM | object.style.pageBreakAfter = "avoid"; |
Syntaxe
page-break-after: auto | avoid | always | left | right | initial | inherit;Exemple : commencer chaque section sur une nouvelle page
Un usage courant consiste à forcer chaque section de premier niveau à commencer sur sa propre page imprimée. Appliquez page-break-after: always à chaque section afin qu'un saut soit inséré après elle :
@media print {
.chapter {
page-break-after: always;
}
}<div class="chapter">
<h2>Chapter 1</h2>
<p>...content...</p>
</div>
<div class="chapter">
<h2>Chapter 2</h2>
<p>...content...</p>
</div>À l'impression, le Chapitre 2 commence maintenant en haut de la page 2.
Exemple : empêcher un saut de page après un élément
Utilisez avoid pour décourager un saut juste après un élément — par exemple, pour éviter qu'un titre se retrouve seul en bas d'une page, séparé du texte qui le suit :
@media print {
h2 {
page-break-after: avoid;
}
}Conseil : combiner avec page-break-before et page-break-inside
page-break-after est l'une des trois propriétés liées. Utilisez-les ensemble pour contrôler entièrement les mises en page imprimées :
page-break-before— contrôle les sauts avant un élément.page-break-inside— empêche qu'un élément (un tableau ou une figure) soit réparti sur deux pages.
Valeurs
| Valeur | Description |
|---|---|
| auto | Par défaut. Laisse le navigateur décider s'il faut insérer un saut de page après l'élément. |
| avoid | Évite d'insérer un saut de page après l'élément si possible. |
| always | Force toujours un saut de page après l'élément. |
| left | Force un saut de page après l'élément de sorte que la page suivante soit formatée comme une page de gauche. |
| right | Force un saut de page après l'élément de sorte que la page suivante soit formatée comme une page de droite. |
| initial | Définit cette propriété à sa valeur par défaut (auto). |
| inherit | Hérite de cette propriété de son élément parent. |
Les valeurs left et right sont principalement utiles pour l'impression recto-verso, lorsque vous souhaitez qu'une section commence sur un côté spécifique de la double page.
Remarque : Pour le développement web moderne, utilisez plutôt la propriété break-after, car page-break-after est déprécié.