Propriété CSS page-break-inside

La propriété page-break-inside contrôle l'apparition d'un saut de page à l'intérieur d'un élément. Cette propriété est généralement utilisée pour gérer les sauts de page dans le contenu d'un élément lors de l'impression. Notez qu'elle ne s'applique qu'aux contextes de médias paginés et n'a aucun effet sur l'affichage à l'écran.

WARNING

La propriété page-break-inside est remplacée par la propriété break-inside. Les alternatives modernes incluent avoid-page et avoid-column pour un contrôle plus fin des sauts de page et de colonne.

Les navigateurs traitent la propriété page-break-inside comme un alias de break-inside. Cela garantit que les sites utilisant la propriété page-break-inside continuent de fonctionner comme prévu.

Valeur initiale	auto
S'applique à	Éléments de niveau bloc.
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	`object.style.pageBreakInside = "avoid";`

Syntaxe

Syntaxe CSS de page-break-inside

css

page-break-inside: auto | avoid | initial | inherit;

L'exemple de code ci-dessous montre l'utilisation de la propriété page-break-inside :

Code CSS de page-break-inside

css

@media print {
  p {
    page-break-inside: auto;
  }
}

Exemple de la propriété `page-break-inside` avec la valeur `avoid` :

Les parties distinctes de la page

html

<!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 {
        page-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>
    <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>

Try it Yourself »

Exemple de la propriété `page-break-inside` avec la valeur `auto` :

Exemple de la propriété page-break-inside avec la valeur "auto" :

html

<!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 {
        page-break-inside: auto;
      }
      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>
    <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>

Try it Yourself »

Valeurs

Valeur	Description
auto	Autorise les sauts de page à l'intérieur de l'élément.
avoid	Évite les sauts de page à l'intérieur de l'élément.

Pratique

Que fait la propriété CSS 'page-break-inside' ?

Elle ajuste le comportement des sauts de page à l'intérieur d'une boîte.Elle indique comment couper les lignes de texte à l'intérieur d'une boîte.Elle est utilisée pour insérer un saut de page après un élément HTML.Elle est utilisée pour empêcher un saut de page de se produire à l'intérieur d'un élément.Elle ajoute une bordure à l'intérieur de l'élément.

Propriété CSS page-break-inside ​

Syntaxe ​

Exemple de la propriété page-break-inside avec la valeur avoid : ​

Exemple de la propriété page-break-inside avec la valeur auto : ​