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>

Essayez-vous-même!

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.