CSS page-break-inside Property

The page-break-inside property controls whether a page break occurs inside an element. This property is generally used to manage page breaks inside an element's content when printing. Note that it only applies to paged media contexts and has no effect on screen rendering.

WARNING

The page-break-inside property is replaced by the break-inside property. Modern alternatives include avoid-page and avoid-column for finer control over page and column breaks.

Browsers treat the page-break-inside property as an alias of break-inside. This ensures 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

CSS page-break-inside syntax

css

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

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

CSS page-break-inside code

css

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

Example of the `page-break-inside` property with the `avoid` value:

The separate parts of the 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>

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

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

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>

Values

Value	Description
auto	Allows page breaks inside the element.
avoid	Avoids page breaks inside the element.

Practice

What does the CSS property 'page-break-inside' do?

It adjusts the page break behavior inside a box.It declares how to break the lines of text inside a box.It is used to break inside the page after an HTML element.It is used to prevent a break from occurring inside an element.It adds a border inside the element.

CSS page-break-inside Property ​

Syntax ​

Example of the page-break-inside property with the avoid value: ​

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