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 |
Média | pour chaque propriété individuelle de la propriété raccourcie : |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
page-break-inside | Chrome Support complet 1 | Edge Support complet 12 | Firefox
Support complet
19
| IE Support complet 8 | Opera Support complet 7 | Safari Support complet 1.3 | WebView Android Support complet 37 | Chrome Android Support complet 18 | Firefox Android
Support complet
19
| Opera Android ? | Safari iOS Support complet 1 | 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.