W3cubDocs

/CSS

page-break-inside

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

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

/* Global values */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: unset;
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
Media visual, paged
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Values

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

Formal syntax

auto | avoid

Example

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 Status Comment
CSS Paged Media Module Level 3
The definition of 'page-break-inside' in that specification.
Working Draft Allows this property on more elements.
CSS Level 2 (Revision 1)
The definition of 'page-break-inside' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 191 8 7 1.3
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support ? ? Yes 191 ? ? ?

1. Until Firefox 25, page-break-inside: avoid did not work with the height of a block.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside