这篇翻译不完整。请帮忙从英语翻译这篇文章。
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 each of the properties of the shorthand: |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | 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 page-break-inside |
Working Draft | Allows this property on more elements. |
| CSS Level 2 (Revision 1) page-break-inside |
Recommendation | Initial definition. |
Browser compatibility
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.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | 12 | 191 | 8 | 7 | 1.3 |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | Yes | 191 | ? | ? | ? |
1. Until Firefox 25, page-break-inside: avoid did not work with the height of a block.