W3cubDocs

/CSS

page-break-inside

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Warning: This property has been replaced by the break-inside property.

The page-break-inside CSS property adjusts page breaks inside the current element.

Try it

page-break-inside: auto;

page-break-inside: avoid;

<div>
  <p>
    The effect of this property can be noticed when the document is being
    printed or a preview of a print is displayed.
  </p>
  <button id="print-btn">Show Print Preview</button>
  <div class="box-container">
    <div class="box">Content before the property</div>
    <div class="box" id="example-element">Content with 'page-break-inside'</div>
    <div class="box">Content after the property</div>
  </div>
</div>

.box {
  border: solid #5b6dcd 5px;
  background-color: #5b6dcd;
  margin: 10px 0;
  padding: 5px;
}

#example-element {
  border: solid 5px #ffc129;
  background-color: #ffc129;
  color: black;
}

@media print {
  #example-element {
    height: 25cm;
  }
}

const btn = document.getElementById("print-btn");

btn.addEventListener("click", () => {
  window.print();
});

Syntax

/* Keyword values */
page-break-inside: auto;
page-break-inside: avoid;

/* Global values */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: revert;
page-break-inside: revert-layer;
page-break-inside: unset;

Values

auto: Initial value. Automatic page breaks (neither forced nor forbidden).
avoid: Avoid page breaks inside the element.

Page break aliases

The page-break-inside property is now a legacy property, replaced by break-inside.

For compatibility reasons, page-break-inside should be treated by browsers as an alias of break-inside. This ensures that sites using page-break-inside continue to work as designed. A subset of values should be aliased as follows:

page-break-inside	break-inside
`auto`	`auto`
`avoid`	`avoid`

Formal definition

Initial value	`auto`
Applies to	block-level elements in the normal flow of the root element. User agents may also apply it to other elements like `table-row` elements.
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

page-break-inside = 
  avoid    |
  auto     |
  inherit

Examples

Avoiding page breaks inside elements

HTML

<div class="page">
  <p>This is the first paragraph.</p>
  <section class="list">
    <span>A list</span>
    <ol>
      <li>one</li>
      <!-- <li>two</li> -->
    </ol>
  </section>
  <ul>
    <li>one</li>
    <!-- <li>two</li> -->
  </ul>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph, it contains more text.</p>
  <p>
    This is the fourth paragraph. It has a little bit more text than the third
    one.
  </p>
</div>

CSS

.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}

Result

Specifications

Specification
CSS Fragmentation Module Level 3> # page-break-properties>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`page-break-inside`	1	12	19	7	1.3	18	19	14	1	1.0	4.4	1
`auto`	1	12	19	15	1.3	18	19	14	1	1.0	4.4	1
`avoid`	1	12	19 Until Firefox 25, `page-break-inside: avoid` did not work with the height of a block.	15	1.3	18	19 Until Firefox for Android 25, `page-break-inside: avoid` did not work with the height of a block.	14	1	1.0	4.4	1