page-break-inside - CSS（层叠样式表） 编辑

page-break-inside CSS 属性调整当前元素内的分页符。

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

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

初始值	auto
适用元素	block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
是否是继承属性	否
计算值	as specified
Animation type	discrete

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 page-break-inside	Working Draft	Allows this property on more elements.
CSS Level 2 (Revision 1) page-break-inside	Recommendation	Initial definition.

Browser compatibility

BCD tables only load in the browser

 

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

 

See also

• page-break-after, page-break-before
• orphans, widows