CSS教程
CSS进阶

CSS page-break-after

此CSS属性用于在打印文档时调整元素后的分页符。在打印过程中,它将在指定元素之后插入一个分页符。我们不能在绝对定位的元素 (position:absolute;)或不生成框的空
元素上使用此属性。
此CSS属性表示在元素框后是否允许分页符。 CSS属性 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>元素和一个按钮。该按钮负责打印页面。单击按钮后,我们将看到该值的效果。
<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 lidihuo.com.</h2>
    </div>
    <div>
        This site is developed so that students may learn computer science related technologies easily. The lidihuo.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>
输出
CSS page-break-after属性

示例-使用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 lidihuo.com.</h2>
    </div>
    <div>
        This site is developed so that students may learn computer science related technologies easily. The lidihuo.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>
输出
CSS page-break-after属性

示例-使用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 lidihuo.com.</h2>
    </div>
    <div>
        This site is developed so that students may learn computer science related technologies easily. The lidihuo.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>
输出
CSS page-break-after属性

示例-使用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 lidihuo.com.</h2>
    </div>
    <div>
        This site is developed so that students may learn computer science related technologies easily. The lidihuo.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>
输出
CSS page-break-after属性
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4