html打印，可以控制换页

原创已于 2025-04-08 13:53:16 修改 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

于 2022-12-13 11:15:08 首次发布

运用专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在网页打印时实现强制换页的方法。通过使用CSS样式中的.pageBreak类，可以在指定位置插入分页符，确保内容按照需求分布在不同的页面上。此技巧适用于需要精确控制打印布局的情况。

该文章已生成可运行项目，

显示效果：

在这里插入图片描述

核心代码：

 <style>

        @media 
        {
            .pageBreak
            {
                page-break-after: always;
            }
        }
    </style>

<!--如果需要强制换页就在上一页的未尾出加上此div-->
<div class="pageBreak">

</div>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印</title>
    <style>

        @media 
        {
            .pageBreak
            {
                page-break-after: always;
            }
        }
    </style>
</head>
<body>
<!--startprint-->
这个标签里面是打印的东西
第一页
<!--如果需要强制换页就在上一页的未尾出加上此div-->
<div class="pageBreak">

</div>
第二页
结束

</body>
</html>