page-break
CSS page-break Property （CSS page-break属性）
In fact, there is not a page-break property in the CSS specification. It is a set of three properties: page-break-inside, page-break-before, and page-break-after. These properties define the behavior of the document when printed. None of them can be used on an empty <div> or on absolutely positioned elements.
Page-break-after
Page-break-after
The page-break-after property defines page break after the element. （Page-break-after属性定义元素后的分页符。）
The page-break-after property is replaced by break-after property. （> page-break-after属性被break-after属性替换。）
Use the code example below to define page break after the element:
@media print {
footer {
page-break-after: left;
}
}
Page-break-before
Page-break-before
The page-break-before property defines page break before the element. （Page-break-before属性定义元素之前的分页符。）
The page-break-before property is replaced by break-before property. （> page-break-before属性被break-before属性替换。）
Use the code example below to define page break before the element:
@media print {
h2 {
page-break-before: right;
}
}
Page-break-inside
Page-break-inside
The page-break-inside property defines the page break inside the element. （Page-break-inside属性定义元素内的分页符。）
The page-break-inside property is replaced by break-inside property. （> PAGE-BREAK-INSIDE属性被BREAK-INSIDE属性替换。）
Example of the break-inside property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
background-color: #8ebf42;
height: 90px;
width: 200px;
columns: 1;
column-width: 80px;
}
.list,
（名单中。）
ol,
（ol）
ul,
（ul）
p {
break-inside: avoid;
}
p {
background-color: #8ebf42;
}
ol,
（ol）
ul,
（ul）
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1;
}
</style>
</head>
<body>
<h2>Page-break property example</h2>
<div class="example">
<p>The first paragraph.</p>
<section class="list">
<span>A list</span>
<ol>
<li>one</li>
</ol>
</section>
<ul>
<li>one</li>
</ul>
<p>The second paragraph.</p>
<p>The third paragraph, it contains more text.</p>
<p>The fourth paragraph. It has a little bit more text than the third one.</p>
</div>
</body>
</html>
Values
Values （价值）
| Value | Description |
|---|---|
| auto | Automatic page-break. This is the default value. |
| always | Always force a page break after the element. |
| avoid | Avoid a page-break after the element. |
| left | Force a page-break after the element, so that the following page is formatted as a left page. |
| right | Force a page-break after the element, so that the following page is formatted as a right page. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |