Les propriétés CSS page-break-before, page-break-after, page-break-inside

page-break-before
page-break-after
page-break-inside

Résumé des caractéristiques de la propriété page-break-before

Description rapide
Gestion des sauts de page avant l'élément.
Statut
Obsolète ✗
Utilisable sur
HTML
Valeurs prédéfinies
auto | always | avoid | left | right
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété page-break-before ne peut pas être animée.
Module W3C
Module CSS - Media paginé
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: REC (recommandation)

Description des propriétés page-break-before, page-break-after, page-break-inside.

✗
Attention ! Ces propriétés sont maintenant obsolètes, bien que les navigateurs continuent de les traiter. Utilisez de préférence les nouvelles propriétés standardisées : break-inside, break-before et break-after.

Ces trois propriétés gèrent l'emplacement des sauts de page sur les documents imprimés.

Syntaxes pour page-break-before et page-break-after.

  • page-break-before: auto;

    Valeur par défaut. Le navigateur détermine l'emplacement des sauts de page en fonction de la place disponible.

  • page-break-before: always;

    Insère un saut de page forcé avant (page-break-before) ou après (page-break-after) l'élément.

  • page-break-before: avoid;

    Évite les sauts de page avant ou après l'élément, dans la mesure du possible.

  • page-break-before: left; page-break-before: right;

    Insère un ou deux sauts de page avant ou après l'élément, de façon à ce que la page suivante soit une page de gauche (avec un numéro pair) ou sur une page de droite (avec un numéro impair).

Syntaxes pour page-break-inside.

  • page-break-inside: auto;

    Valeur par défaut. Le navigateur détermine l'emplacement des sauts de page en fonction de la place disponible.

  • page-break-inside: avoid;

    Évite que l'élément ne soit coupé par un saut de page, dans la mesure du possible.

Valeurs globales
(communes à toutes les propriétés)

page-break-before: initial (auto) page-break-before: inherit page-break-before: revert page-break-before: revertLayer page-break-before: unset
page-break-after: initial (auto) page-break-after: inherit page-break-after: revert page-break-after: revertLayer page-break-after: unset
page-break-inside: initial (auto) page-break-inside: inherit page-break-inside: revert page-break-inside: revertLayer page-break-inside: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété page-break-before.

Le simulateur ci-dessous ajoute une propriété page-break-before aux titres h2 de cette page. Pour voir le résultat vous devrez imprimer la page ou l'afficher en aperçu avant impression.

page-break-before :
page-break-after :
page-break-inside :

Prise en charge par les navigateurs (compatibilité).

Bien que ces propriétés soient relativement bien reconnues, elles ne sont plus standardisées. Dans le souci d'homogénéiser le comportement des différents navigateurs, le W3C a défini des propriétés plus générales (sauts de page, de colonne, ou de région), qui sont break-before, break-after et .

1
Propriété
page-break-after
2
Propriété
page-break-before
3
Propriété
page-break-inside
Estimation de la prise en charge globale.
96%
96%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Historique de la propriété page-break-before.

Voir aussi, au sujet des impressions.

Les spécifications CSS éditées par le W3C sont organisées en modules. Les propriétés relatives à l'impression, comme page-break-before et page-break-after, font partie du module CSS Paged Media Module. Les définitions suivantes sont également décrites dans ce module.

Sélecteurs :

:first
Pseudo-classe désignant le première page.
:left
Pseudo-classe désignant les pages de gauche (pages paires).
:right
Pseudo-classe désignant les pages de droite (pages impaires).

Propriétés :

⚠
bleed
Définit la présence d'une marge supplémentaire pour les pages imprimées.
⚠
marks
Choisit les traits de coupe et repères d'alignement.
✗
page-break-after
Gestion des sauts de page après l'élément.
✗
page-break-inside
Gestion des sauts de page au milieu de l'élément.
size
Dimensions et orientation des pages imprimées.

Directives :

@page
Caractéristiques de la page, à l'impression.