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.
/* 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
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
Specification |
---|
CSS Paged Media Module Level 3 # page-break-inside |
Compatibilité des navigateurs
BCD tables only load in the browser