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.

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: 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.

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

Syntaxe formelle

page-break-inside = 
  avoid    |
  auto     |
  inherit

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

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

Specification
CSS Paged Media Module Level 3
# page-break-inside

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi