CSS page-break-after
CSS page-break-after
此CSS属性用于在打印文档时调整元素后的分页符。在打印过程中，它将在指定元素之后插入一个分页符。我们不能在绝对定位的元素
（position：absolute;）或不生成框的空
（position：absolute;）或不生成框的空
元素上使用此属性。
此CSS属性表示在元素框后是否允许分页符。 CSS属性
page-break-before 和
page-break-inside 包括
page-break-after ，可帮助我们定义行为的行为。文档。
page-break-before 和
page-break-inside 包括
page-break-after ，可帮助我们定义行为的行为。文档。
语法
page-break-after: auto | always | left | right | avoid | initial | inherit;
可能的值
此 CSS的值的简要说明属性列表如下。
| 值 | 说明 |
| auto | 这是默认值，必要时在元素后插入分页符。 |
| always | 它指定元素之后强制分页。 |
| left | 它用于避免在元素之后分页。 |
| right | 它会在指定元素后强制分页一次或两次，以便将下一页描述为左侧页面。 |
| avoid | 它会在指定元素之后强制分页一次或两次，以便将下一页显示为右侧页面。 |
| initial | 它将属性设置为其默认值。 |
| inherit | 如果指定了此值，则对应的元素将使用其父元素的计算值。 |
我们以每个示例为例来了解上述值。
示例-使用auto值
值
auto 是默认值，可在需要时自动插入分页符。在此示例中，我们使用两个<div>元素和一个按钮。该按钮负责打印页面。单击按钮后，我们将看到该值的效果。
auto 是默认值，可在需要时自动插入分页符。在此示例中，我们使用两个<div>元素和一个按钮。该按钮负责打印页面。单击按钮后，我们将看到该值的效果。
<html>
<head>
<style type="text/css">
div {
font-size: 20px;
page-break-after: 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>
输出
示例-使用always值
此值始终强制插入分页符，无论是否需要。我们正在使用一个按钮来打印页面。我们必须单击该按钮才能看到效果。
<html>
<head>
<style type="text/css">
div {
font-size: 20px;
page-break-after: always;
}
</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>
输出
示例-使用left值
值
左强制插入一个或两个分页符，以便下一个格式设置为-页面将作为左页面。
左强制插入一个或两个分页符，以便下一个格式设置为-页面将作为左页面。
<html>
<head>
<style type="text/css">
div {
font-size: 20px;
page-break-after: left;
}
</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>
输出
示例-使用right值
值
right 会强制插入一个或两个分页符，以便下一个-页面将作为正确的页面。
right 会强制插入一个或两个分页符，以便下一个-页面将作为正确的页面。
<html>
<head>
<style type="text/css">
div {
font-size: 20px;
page-break-after: right;
}
</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>
输出
<< Python 语法 Python 变量 >>