Propriété CSS `page-break-inside`

Obsolète

Évitez d'utiliser cette fonctionnalité dans de nouveaux projets. The page-break- alias properties exist only for backwards compatibility with pages that predate the break- properties. Cette fonctionnalité peut être candidate à la suppression des standards web ou des navigateurs.

Envisagez d'utiliser plutôt les fonctionnalités suivantes : Page breaks.

En savoir plus
Voir la compatibilité complète

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

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).
avoid: 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 doit être considérée par les navigateurs comme synonyme de break-inside. De cette façon, les sites utilisant page-break-inside peuvent 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 initiale	`auto`
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ée	non
Valeur calculée	comme défini
Type d'animation	discrè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;
}