page-break-inside
Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.
Attention :
Cette propriété a été remplacée par la propriété break-inside.
La propriété CSS page-break-inside permet d'ajuster les sauts de page placés à l'intérieur de l'élément courant.
Exemple interactif
page-break-inside: auto;
page-break-inside: avoid;
<div>
<p>
L'effet de cette propriété peut être remarqué lorsque le document est en
cours d'impression ou qu'un aperçu avant impression est affiché.
</p>
<button id="print-btn">Afficher l'aperçu avant impression</button>
<div class="box-container">
<div class="box">Contenu avant la propriété</div>
<div class="box" id="example-element">Contenu avec 'page-break-inside'</div>
<div class="box">Contenu après la propriété</div>
</div>
</div>
.box {
border: solid #5b6dcd 5px;
background-color: #5b6dcd;
margin: 10px 0;
padding: 5px;
}
#example-element {
border: solid 5px #ffc129;
background-color: #ffc129;
color: black;
}
@media print {
#example-element {
height: 25cm;
}
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
Syntaxe
/* 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: revert;
page-break-inside: revert-layer;
page-break-inside: unset;
Valeurs
autoObsolète-
Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).
avoidObsolète-
L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.
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 |
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 défini |
| Type d'animation | discrète |
Syntaxe formelle
page-break-inside =
avoid |
auto |
inherit
Exemples
>Éviter les sauts de page à l'intérieur des éléments
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 |
|---|
| CSS Fragmentation Module Level 3> # page-break-properties> |
Compatibilité des navigateurs
Voir aussi
- Les propriétés
break-before,break-after,break-inside - Les propriétés
page-break-afterObsolète ,page-break-beforeObsolète - Les propriétés
orphans,widows