在打印网页内容时，控制分页位置非常重要，尤其是在生成报告、发票或文档类页面时。HTML本身没有“分页符”标签，但可以通过CSS的page-break相关属性来控制打印时的分页行为。
以下CSS属性专门用于控制打印时的分页效果，不会影响屏幕显示，只在打印预览或实际打印时生效。
1. page-break-before
控制元素前是否插入分页符。
常用值：
2. page-break-after
控制元素后是否插入分页符。
常用值与page-break-before相同。
立即学习“前端免费学习笔记（深入）”；
3. page-break-inside
控制元素内部是否允许分页。
常用于防止块级内容被拆分到两页。
假设你有一份多章节的文档，希望每章从新的一页开始打印：
<h2 class="chapter">第一章：介绍</h2>
<p>这里是第一章的内容...</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1718">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680315860981.png" alt="Tellers AI">
</a>
<div class="aritcle_card_info">
<a href="/ai/1718">Tellers AI</a>
<p>Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="Tellers AI">
<span>136</span>
</div>
</div>
<a href="/ai/1718" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="Tellers AI">
</a>
</div>
<p><h2 class="chapter">第二章：方法</h2>
<p>这里是第二章的内容...</p></p>添加CSS样式：
@media print {
.chapter {
page-break-before: always; /* 每章从新页开始 */
}
<p>table, img, div {
page-break-inside: avoid; /<em> 避免表格或图片被截断 </em>/
}</p><p>/<em> 避免小段文字孤行在页尾 </em>/
p {
orphans: 3;
widows: 3;
}
}</p>CSS分页属性主要在@media print中使用，确保不影响网页正常浏览。
<br style="page-break-after: always">这类非标准写法page-break-inside: avoid对table和div特别有用，防止内容断裂W3C推荐使用新的break-after、break-before属性，它们是page-break-*的升级版，支持更多场景（如flex、grid布局）：
.chapter {
break-before: page;
}
<p>.no-break {
break-inside: avoid;
}</p>虽然page-break-*仍广泛使用，但建议逐步过渡到break-*语法以获得更好兼容性。
基本上就这些。通过合理使用CSS打印分页控制，可以大幅提升打印输出的专业性和可读性。
以上就是如何在HTML中插入分页符_HTML CSS page-break分页控制打印样式的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
733
收藏
取消收藏
