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.

La propriété page-break-after est remplacée par la propriété break-after.

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.

La propriété page-break-before est remplacée par la propriété break-before.

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.

La propriété page-break-inside est remplacée par la propriété break-inside.

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+


Trouvez-vous cela utile?

Articles Associées