CSS 分页媒体 break-inside 属性用于在内容处于打印页面模式时断开元素内的页面、列或区域。
可能的值
- auto − 默认值。它允许根据碎片上下文在元素内部进行中断。
- avoid − 避免元素内部的中断，强制内容保持在单个片段中。
- avoid-page − 避免元素内部的中断，专门用于分页媒体。
- avoid-column − 避免元素内部的中断，专门用于多列布局。
- avoid-region − 避免元素内部的中断，特别是 CSS 区域。截至目前，这是实验性的，预计将来会发生变化。
适用于
块级元素。
DOM 语法
breakInside = "auto|avoid|avoid-page|avoid-column|avoid-region";
应用以下规则来确定是否必须进行中断：
- 作为强制中断值的三个相关值（always、left、right、page、column 或 region）中的任何一个都具有优先权。如果有多个分页符属性，我们将选择序列中最后一个属性。后续是 ： break-before 优先于 break-after，break-after 优先于 break-inside。
- 如果三个相关值中的任何一个是避免分页符值（如 avoid、avoid-page、avoid-region 或 avoid-column），则不会在该位置添加分页符。
分页符别名
Web 浏览器将旧版 page-break-inside 属性视为 break-inside 属性的别名。这确保了使用 page-break-inside 的网站顺利运行。break-inside 属性的以下值应相等。
| 分页符 | break-inside |
|---|---|
| auto | auto |
| avoid | avoid |
CSS break-inside - auto 值
以下示例演示了在打印页面时，break-inside： auto 属性会断开列内的段落 -
<html>
<head>
<style>
ul {
column-width: 150px;
column-gap: 20px;
}
li {
list-style-type: none;
}
p {
break-inside: auto;
border: 3px solid black;
padding: 5px;
margin: 5px;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<h3>Click on below button to see the effect when you print the page.</h3>
<button onclick="printPage()">Print Page</button>
<ul>
<li> <p>This is first paragraph.</p></li>
<li><p>This is second paragraph.</p></li>
<li><p>This is third paragraph.</p></li>
<li><p>This is fourth paragraph.</p></li>
<li><p>This is fifth paragraph.</p></li>
</ul>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-inside - avoid 值
以下示例演示了 break-inside： avoid 属性可避免在打印页面时在段落内分页 -
<html>
<head>
<style>
ul {
column-width: 150px;
column-gap: 20px;
}
li {
list-style-type: none;
}
p {
break-inside: avoid;
border: 3px solid black;
padding: 5px;
margin: 5px;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<h3>Click on below button to see the effect when you print the page.</h3>
<button onclick="printPage()">Print Page</button>
<ul>
<li> <p>This is first paragraph.</p></li>
<li><p>This is second paragraph.</p></li>
<li><p>This is third paragraph.</p></li>
<li><p>This is fourth paragraph.</p></li>
<li><p>This is fifth paragraph.</p></li>
</ul>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-inside - avoid-page 值
下面的示例演示了 break-inside： avoid-page 属性在打印页面时避免了元素内部的分页符 -
<html>
<head>
<style>
div {
break-inside: avoid-page;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
<div class="avoid-break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
<div><p>This is a paragraph 3. It will be displayed on first page.</p></div>
<div><p>This is a paragraph 4. It will be displayed on first page.</p></div>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
CSS break-inside - avoid-column 值
以下示例演示了 break-inside： avoid-column 属性可避免在打印页面时在节内出现分列符 -
<html>
<head>
<style>
main {
column-width: 200px;
column-gap: 10px;
}
section {
width: 200px;
height: 100px;
border: 2px solid black;
margin: 10px;
padding: 5px;
break-inside: avoid-column;
}
button {
background-color: violet;
padding: 5px;
}
</style>
</head>
<body>
<p>Click on below button to see the effect when you print the page.</p>
<button onclick="printPage()">Print Page</button>
<main>
<section>
<h3>Column 1</h3>
<p>This is a column 1.</p>
</section>
<section>
<h3>Column 2</h3>
<p>This is a column 2.</p>
</section>
<section>
<h3>Column 3</h3>
<p>This is a column 3.</p>
</section>
<section>
<h3>Column 4</h3>
<p>This is a column 4.</p>
</section>
</main>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
