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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 19
Notes
Support complet 19
Notes
Notes Until Firefox 25, page-break-inside: avoid did not work with the height of a block.
IE Support complet 8Opera Support complet 7Safari Support complet 1.3WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 19
Notes
Support complet 19
Notes
Notes Until Firefox 25, page-break-inside: avoid did not work with the height of a block.
Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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