CSS page-break-inside属性
CSS page-break-inside属性
顾名思义，此CSS属性用于在打印文档时指定元素内的分页符。此CSS属性不能用于绝对定位的元素或不生成框的空
<div> 元素。
<div> 元素。
如果要避免图像，项目列表，代码段，表格中的分页符，则可以在打印文档时在指定元素内插入或避免分页符。
strong> page-break-inside 属性。
此CSS属性表示是否在元素的框内允许分页符。包括
page-break-inside 在内的CSS属性
page-break-before 和
page-break-after 有助于我们定义文档行为。
page-break-inside 在内的CSS属性
page-break-before 和
page-break-after 有助于我们定义文档行为。
语法
page-break-inside: auto | avoid | initial | inherit;
可能的值
此 CSS的值的简要说明属性列表如下。
| 值 | 说明 |
| auto | 如果有必要，它是在元素内插入分页符的默认值。 |
| avoid | 用于避免元素内的分页符。 |
| initial | 它将属性设置为其默认值。 |
| inherit | 如果指定了此值，则对应的元素将使用其父元素 page-break-inside 属性的计算值。 |
我们以每个示例为例来了解上述值。
示例-使用auto值
auto 是默认值，可在需要时自动插入分页符。此值既不会阻止也不会强制分页在元素框内。
<html>
<head>
<style type="text/css">
div {
font-size: 20px;
page-break-inside: auto;
}
</style>
</head>
<body>
<div>
<h2>Hello World!!</h2>
<h2>Welcome to the bianchenghao6.com.</h2>
</div>
<div>
This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
<br>
<button onclick=func()>printthis page</button>
<script>
function func() {
window.print();
}
</script>
</body>
</html>
输出
示例-使用避免值
该值避免了元素框内的分页符（如果可能）。在这里，我们使用一个按钮来打印页面。我们必须单击该按钮才能看到效果。
<html>
<head>
<style type="text/css">
div {
font-size: 20px;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div>
<h2>Hello World!!</h2>
<h2>Welcome to the bianchenghao6.com.</h2>
</div>
<div>
This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is committed to providing easy and in-depth tutorials on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</div>
<br>
<button onclick=func()>printthis page</button>
<script>
function func() {
window.print();
}
</script>
</body>
</html>
输出
