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.