Propriété CSS 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 absolument.

La propriété page-break-inside est remplacée par la propriété break-inside.
Valeur initiale auto
Appliquée à É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;

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>
    <div class="example">
      <p>C'est 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 troisième paragraphe, qui comprend plus de texte.</p>
      <p>Le quatrième paragraphe. Il a un peu plus texte que le troisème.</p>
    </div>
  </body>
</html>

Valeurs

Valeur Description
auto Permet d'insérer un saut de page au sein de l'élément.
avoid Évite d'insérer un saut de page au sein de l'élément.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

1.0+ 12.0+ 19.0+ 1.3+ 7.0+


Trouvez-vous cela utile?

Articles Associées