Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

page-break-inside

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Attention : Cette propriété a été remplacée par la propriété break-inside.

La propriété CSS page-break-inside permet d'ajuster les sauts de page placés à l'intérieur de l'élément courant.

Exemple interactif

page-break-inside: auto;
page-break-inside: avoid;
<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-inside'</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;
}

@media print {
  #example-element {
    height: 25cm;
  }
}
const btn = document.getElementById("print-btn");

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

Syntaxe

css
/* Valeurs avec un mot-clé */
page-break-inside: auto;
page-break-inside: avoid;

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

Valeurs

auto Obsolète

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

avoid Obsolète

L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.

Alias avec break-inside

La propriété page-break-inside a désormais été remplacée par la propriété break-inside.

Pour des raisons de compatibilité, page-break-inside devrait être considérée par les navigateurs comme synonyme de break-inside. De cette façon, les sites utilisant page-break-inside pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances

page-break-inside break-inside
auto auto
avoid avoid

Définition formelle

Valeur initialeauto
Applicabilitéles éléments de bloc dans le flux normal de l'élément racine. Les agents utilisateurs peuvent également l'appliquer sur d'autres éléments comme table-row.
Héritéenon
Valeur calculéecomme défini
Type d'animationdiscrète

Syntaxe formelle

page-break-inside = 
avoid |
auto |
inherit

Exemples

Éviter les sauts de page à l'intérieur des éléments

HTML

html
<div class="page">
  <p>Un premier paragraphe.</p>
  <section class="list">
    <span>Une liste</span>
    <ol>
      <li>Un</li>
      <!-- <li>Deux</li> -->
    </ol>
  </section>
  <ul>
    <li>Un</li>
    <!-- <li>Deux</li> -->
  </ul>
  <p>Un deuxième paragraphe.</p>
  <p>Un troisième paragraphe, un peu plus long.</p>
  <p>
    Un quatrième paragraphe, un peu plus long voire plus long que le troisième.
  </p>
</div>

CSS

css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

Résultat

Spécifications

Spécification
CSS Fragmentation Module Level 3
# page-break-properties

Compatibilité des navigateurs

Voir aussi