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 |
Compatibilité des navigateurs
Chargement…