Propriété CSS page-break
En fait, il n'y a aucune propriété page-break dans la spécification CSS. C'est 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 lorsqu'il est imprimé.
Page-break-after
La propriété page-break-after définit les sauts de page placés après l'élément.
Cette propriété ne peut pas être utilisée sur un <div> vide ou sur des éléments positionnés de façon absolue.
Exemple
@media print {
footer {page-break-after: left;}
}Page-break-before
La propriété page-break-before définit les sauts de page placés avant l'élément.
TCette propriété ne peut pas être utilisée sur un <div> vide ou sur des éléments positionnés de façon absolue.
Exemple
@media print {
h2 {
page-break-before: right;
}Page-break-inside
La propriété page-break-inside définit les sauts de page au sein de l'élément.
Cette propriété ne peut pas être utilisée sur un <div> vide ou sur des éléments positionnés de façon absolue.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>TItre du 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: 1;
}
</style>
</head>
<body>
<h2>Exemple de la propriété page-break</h2>
<div class="example">
<p>Le premier paragraphe.</p>
<section class="list">
<span>Une liste</span>
<ol>
<li>une</li>
</ol>
</section>
<ul>
<li>une</li>
</ul>
<p>Le deuxième paragraphe.</p>
<p>Le troisime paragraphe, il contient plus texte.</p>
<p>Le quatrième paragraphe. Il a un peu plus texte que le troisième.</p>
</div>
</body>
</html>Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | 7.0+ |
Pratiquez vos connaissances
