W3docs
fr
Se connecter

Propriété CSS page-break-inside

The CSS -page-break-inside property defines a page break inside a specified element. See the values of this property.

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 initialeauto
S'applique àÉléments de niveau bloc.
HéritéeNon.
AnimableNon.
VersionCSS2
Syntaxe DOMobject.style.pageBreakInside = "avoid";

Syntaxe

Syntaxe CSS de page-break-inside

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

@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

<!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>
Essayez vous-même »

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

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

<!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>
Essayez vous-même »

Valeurs

ValeurDescription
autoAutorise 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

Pratique

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