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
Définition formelle
| 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 |
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 Fragmentation Module Level 3 # page-break-properties |