CSS page-break-inside Property

❮ Prev Next ❯

The page-break-inside property defines page break inside the element. This property is generally used to insert a page break inside of an element's content while printing.

This property cannot be used on an empty <div> or on absolutely positioned elements.

The page-break-inside property is replaced by the break-inside property.

Browsers should treat the page-break-inside property as an alias of break-inside. This assures that sites using the page-break-inside property still work as designed.

Initial Value	auto
Applies to	Block-level elements.
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.pageBreakInside = "Avoid";

Syntax

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

The code example below shows the usage of the page-break-inside property:

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

Example of the page-break-inside property:

<!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 {
        break-inside: avoid;
      }
      @media print {
        .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>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 »

Example of the page-break-inside property with the "auto" value:

<!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;
      }
      @media print {
        .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: 1;
      }
    </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 »

Values

Value	Description
auto	Allows to insert any page break inside the element.
avoid	Avoids to insert any page inside the element.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.