CSS page-break-inside Property

The CSS page-break-inside property controls whether a page break is allowed inside an element when the document is printed. A page break is the point where content stops on one printed page and continues on the next. Use this property to keep a block of content — a paragraph, a list, a figure, or a table row — from being split across two pages.

This property only takes effect in paged media contexts (printing, print preview, or saving to PDF). It has no visible effect on a normal screen, where content scrolls continuously rather than flowing onto discrete pages.

When to use it

The most common case is page-break-inside: avoid, which tells the browser to keep an element together on a single page rather than splitting it. Typical targets:

Keeping a heading attached to the text that follows it.
Preventing a single list, code block, or <figure> from being cut in half.
Holding a table row, card, or invoice line item intact.

If the element is taller than a full page, the browser cannot honor avoid — the content has to break somewhere — but it will start the element on a fresh page so as much as possible stays together.

Warning

page-break-inside is a CSS2 legacy property. The modern replacement is break-inside, which works for printed pages, multi-column layouts, and regions, and supports finer-grained values such as avoid-page and avoid-column.

For backward compatibility, browsers treat page-break-inside as an alias of break-inside, so existing sites keep working. Prefer break-inside in new code.

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;

Because the property only matters in print, it is usually scoped inside a @media print rule so it does not affect on-screen layout:

@media print {
  /* Don't split tables or figures across pages */
  table,
  figure {
    page-break-inside: avoid;
  }
}

Examples

page-break-inside with the `avoid` value

Here every paragraph, list, and .list section is asked to stay on one page. When you print this document (or open print preview), the browser will avoid splitting any of those blocks across a page boundary.

<!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 »

page-break-inside with the `auto` value

auto is the initial value and restores the default behavior: the browser is free to insert a page break inside the element wherever it needs to. Setting it explicitly is useful to override an inherited or earlier avoid rule for a specific element.

<!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 »

Values

Value	Description
`auto`	Default. Allows a page break inside the element when one is needed.
`avoid`	Avoids inserting a page break inside the element, keeping it together when possible.
`initial`	Sets the property to its default value (`auto`).
`inherit`	Inherits the value from the parent element.

page-break-inside is one of a family of fragmentation properties that control where printed content breaks:

page-break-before and page-break-after — force or avoid a break before or after an element.
break-inside and break-before — the modern, more capable replacements that also handle multi-column layouts.

Page breaks interact closely with multi-column layouts created by the columns and column-width properties.

Browser support

page-break-inside is supported in all major browsers, but support for the avoid value when printing has historically been inconsistent. For the most reliable results in new projects, use break-inside: avoid, which browsers map back to page-break-inside automatically.

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.