page-break-inside
CSS page-break-inside Property
The page-break-inside property defines page break inside the element. This property is generally used to insert a page break inside of an element’s content while printing.
This property cannot be used on an empty <div> or on absolutely positioned elements.
The page-break-inside property is replaced by the break-inside property.
Browsers should treat the page-break-inside property as an alias of break-inside. This assures that sites using the page-break-inside property still work as designed.
| 类目 | 类目 |
|---|---|
| Initial Value | auto |
| Applies to | Block-level elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.pageBreakInside = “Avoid”; |
Syntax
Syntax
page-break-inside: auto | avoid | initial | inherit;
The code example below shows the usage of the page-break-inside property:
@media print {
p {
page-break-inside: auto;
}
}
Example of the page-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,
ul,
p {
break-inside: avoid;
}
@media print {
.list,
ol,
ul,
p {
break-inside: avoid;
}
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1;
}
</style>
</head>
<body>
<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>
Example of the page-break-inside property with the “auto” value:
<!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,
ul,
p {
page-break-inside: auto;
}
@media print {
.list,
ol,
ul,
p {
page-break-inside: auto;
}
}
p {
background-color: #8ebf42;
}
ol,
ul,
.list {
margin: 0.5em 0;
display: block;
background-color: #1c87c9;
}
p:first-child {
margin-top: 1;
}
</style>
</head>
<body>
<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 | Allows to insert any page break inside the element. |
| avoid | Avoids to insert any page inside the element. |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |