Propriété CSS page-break-inside
La propriété CSS page-break-inside définit un saut de page à l'intérieur d'un élément. Découvrez les valeurs de cette propriété.
La propriété CSS page-break-inside contrôle si un saut de page est autorisé à l'intérieur d'un élément lors de l'impression du document. Un saut de page est le point où le contenu s'arrête sur une page imprimée et continue sur la suivante. Utilisez cette propriété pour empêcher un bloc de contenu — un paragraphe, une liste, une figure ou une ligne de tableau — d'être divisé sur deux pages.
Cette propriété ne prend effet que dans les contextes de médias paginés (impression, aperçu avant impression ou enregistrement en PDF). Elle n'a aucun effet visible sur un écran normal, où le contenu défile en continu plutôt que de s'écouler sur des pages distinctes.
Quand l'utiliser
Le cas le plus courant est page-break-inside: avoid, qui indique au navigateur de conserver un élément sur une seule page plutôt que de le diviser. Cibles typiques :
- Garder un titre attaché au texte qui le suit.
- Empêcher qu'une liste, un bloc de code ou un élément
<figure>soit coupé en deux. - Maintenir intacte une ligne de tableau, une carte ou un élément de facture.
Si l'élément est plus grand qu'une page entière, le navigateur ne peut pas respecter avoid — le contenu doit être coupé quelque part — mais il commencera l'élément sur une nouvelle page afin que le plus grand nombre d'éléments possible reste ensemble.
page-break-inside est une propriété héritée de CSS2. Le remplaçant moderne est break-inside, qui fonctionne pour les pages imprimées, les mises en page multi-colonnes et les régions, et prend en charge des valeurs plus précises telles que avoid-page et avoid-column.
Pour la compatibilité ascendante, les navigateurs traitent page-break-inside comme un alias de break-inside, de sorte que les sites existants continuent de fonctionner. Préférez break-inside dans le nouveau code.
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments de niveau bloc. |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | object.style.pageBreakInside = "avoid"; |
Syntaxe
page-break-inside: auto | avoid | initial | inherit;Étant donné que la propriété n'a d'importance qu'à l'impression, elle est généralement placée dans une règle @media print afin de ne pas affecter la mise en page à l'écran :
@media print {
/* Don't split tables or figures across pages */
table,
figure {
page-break-inside: avoid;
}
}Exemples
page-break-inside avec la valeur avoid
Ici, chaque paragraphe, liste et section .list est invité à rester sur une seule page. Lorsque vous imprimez ce document (ou ouvrez l'aperçu avant impression), le navigateur évitera de diviser l'un de ces blocs sur une limite de page.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
page-break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>page-break-inside avec la valeur auto
auto est la valeur initiale et restaure le comportement par défaut : le navigateur est libre d'insérer un saut de page à l'intérieur de l'élément là où il en a besoin. La définir explicitement est utile pour remplacer une règle avoid héritée ou antérieure pour un élément spécifique.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
ol,
ul,
p {
page-break-inside: auto;
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1em;
}
</style>
</head>
<body>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
auto | Par défaut. Permet un saut de page à l'intérieur de l'élément lorsque cela est nécessaire. |
avoid | Évite d'insérer un saut de page à l'intérieur de l'élément, en le maintenant ensemble dans la mesure du possible. |
initial | Définit la propriété à sa valeur par défaut (auto). |
inherit | Hérite de la valeur de l'élément parent. |
Propriétés associées
page-break-inside fait partie d'une famille de propriétés de fragmentation qui contrôlent où le contenu imprimé est interrompu :
page-break-beforeetpage-break-after— forcent ou évitent un saut avant ou après un élément.break-insideetbreak-before— les remplaçants modernes et plus puissants qui gèrent également les mises en page multi-colonnes.
Les sauts de page interagissent étroitement avec les mises en page multi-colonnes créées par les propriétés columns et column-width.
Prise en charge des navigateurs
page-break-inside est pris en charge dans tous les principaux navigateurs, mais la prise en charge de la valeur avoid lors de l'impression a historiquement été incohérente. Pour des résultats plus fiables dans les nouveaux projets, utilisez break-inside: avoid, que les navigateurs associent automatiquement à page-break-inside.