Propriété CSS page-break-before

Exemple interactif

page-break-before: auto;

page-break-before: always;

<div>
  <p>
    L'effet de cette propriété peut être remarqué lorsque le document est en
    cours d'impression ou qu'un aperçu avant impression est affiché.
  </p>
  <button id="print-btn">Afficher l'aperçu avant impression</button>
  <div class="box-container">
    <div class="box">Contenu avant la propriété</div>
    <div class="box" id="example-element">Contenu avec 'page-break-before'</div>
    <div class="box">Contenu après la propriété</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Syntaxe

/* Valeurs avec un mot-clé */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* Valeurs globales */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: revert-layer;
page-break-before: unset;

Valeurs

Cette propriété est définie comme l'un des mots-clés suivants :

auto

Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).

always

Le saut de page est toujours forcé avant l'élément.

avoid

Les sauts de page sont évités avant l'élément.

left

Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche. C'est la page placée du côté gauche de la reliure du livre ou du côté arrière de la page en impression recto-verso.

right

Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite. C'est la page placée du côté droit de la reliure du livre ou du côté avant de la page en impression recto-verso.

recto

Si les pages progressent de gauche à droite, cette valeur agit comme right. Si les pages progressent de droite à gauche, elle agit comme left.

verso

Si les pages progressent de gauche à droite, cette valeur agit comme left. Si les pages progressent de droite à gauche, elle agit comme right.

Alias des sauts de page

La propriété page-break-before est désormais une propriété héritée, remplacée par break-before.

Pour des raisons de compatibilité, page-break-before doit être traité par les navigateurs comme un alias de break-before. Cela garantit que les sites utilisant page-break-before continuent de fonctionner comme prévu. Un sous-ensemble de valeurs doit avoir un alias comme suit :

Définition formelle

Syntaxe formelle

page-break-before = 
  auto     |
  always   |
  avoid    |
  left     |
  right    |
  inherit  

Exemples

Éviter un saut de page avant un élément

/* Éviter un saut de page avant les éléments div de classe note */
div.note {
  page-break-before: avoid;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés break-before, break-after, break-inside
• Les propriétés page-break-after , page-break-inside
• Les propriétés orphans, widows