page-break-inside

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

La propriété page-break-inside ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.

/* 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: unset;

Syntaxe

Valeurs

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.

Syntaxe formelle

auto | avoid

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`

Exemples

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

.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	État	Commentaires
CSS Paged Media Module Level 3 La définition de 'page-break-inside' dans cette spécification.	Version de travail	Permet d'appliquer cette propriété sur plus d'éléments.
CSS Level 2 (Revision 1) La définition de 'page-break-inside' dans cette spécification.	Recommendation	Définition initiale.

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 spécifié
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser