CSS page-break-inside Property

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>

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>

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.

Browser support

1.0+ 12.0+ 19.0+ 1.3+ 7.0+

Practice Your Knowledge

page-break-inside property doesn't have __ value.



Do you find this helpful?

Related articles