W3cubDocs

/CSS

page-break-inside

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

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 Paged Media Module Level 3 # page-break-inside

Browser compatibility

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