Propriété CSS page-break
En fait, il n'existe pas de propriété page-break dans la spécification CSS. Il s'agit d'un ensemble de trois propriétés : page-break-inside, page-break-before et page-break-after. Ces propriétés définissent le comportement du document lors de l'impression. Aucune d'entre elles ne peut être utilisée sur un élément <div> vide ou sur des éléments positionnés de manière absolue.
Page-break-after
La propriété page-break-after définit un saut de page après l'élément.
WARNING
La propriété page-break-after est remplacée par la propriété break-after.
Utilisez l'exemple de code ci-dessous pour définir un saut de page après l'élément :
Exemple de code CSS page-break-after
@media print {
footer {
page-break-after: left;
/* modern equivalent: break-after: left; */
}
}Page-break-before
La propriété page-break-before définit un saut de page avant l'élément.
WARNING
La propriété page-break-before est remplacée par la propriété break-before.
Utilisez l'exemple de code ci-dessous pour définir un saut de page avant l'élément :
Exemple de code CSS page-break-before | W3Docs
@media print {
h2 {
page-break-before: right;
/* modern equivalent: break-before: right; */
}
}Page-break-inside
La propriété page-break-inside définit le saut de page à l'intérieur de l'élément.
WARNING
La propriété page-break-inside est remplacée par la propriété break-inside.
Exemple de la propriété break-inside :
L'exemple suivant utilise la propriété moderne break-inside, qui remplace l'ancienne page-break-inside.
Exemple des propriétés CSS page-break et break-inside | W3Docs
<!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 {
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>
<h2>Page-break property example</h2>
<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 | Saut de page automatique. Il s'agit de la valeur par défaut. |
| always | Force toujours un saut de page après l'élément. |
| avoid | Évite un saut de page après l'élément. |
| left | Force un saut de page après l'élément, de sorte que la page suivante soit mise en forme comme une page de gauche. |
| right | Force un saut de page après l'élément, de sorte que la page suivante soit mise en forme comme une page de droite. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Remarque : les valeurs always, left et right ne s'appliquent qu'à page-break-before et page-break-after. page-break-inside n'accepte que auto et avoid.
Pratique
Quelle est la fonction de la propriété 'page-break' en CSS ?