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;

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
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • paged: Valeur introuvable dans la base de données
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple112191871.3
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui191 ? ? ?

1. Until Firefox 25, page-break-inside: avoid did not work with the height of a block.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,