最可靠的分页方法是在下一页首个元素前插入无样式的<div style="page-break-before: always;">，并置于@media print中；表格需拆分或外层设break-inside: avoid；打印样式须重置边距、背景、非打印元素及字体大小。
page-break-before: always 是最可靠的分页锚点
直接给目标内容元素（比如 <img> 或 <section>）加 page-break-after: always，十有八九会失效——它只是“建议”，浏览器在元素后面没内容、或该元素已脱离文档流时就直接忽略。真正稳定的做法，是把分页信号放在「下一页内容的开头」。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在第二页第一个元素前插入一个干净的
<div style="page-break-before: always;"></div> - 这个
<div>不要设 margin/padding/background，也不用 class，避免被其他样式干扰 - 必须写在
@media print块里，否则开发时完全看不到效果 - 如果用了
flex或grid布局，别指望父容器里的子项能响应page-break-before—— 插空<div>绕过布局限制
表格跨页断裂不是 bug，而是默认行为
<table> 本身不支持 break-inside: avoid 的精细控制，浏览器把它当原子单元处理：要么整张表挤进一页（溢出），要么整体挪到下一页（留大片空白）。强行给 <tr> 加 page-break-inside: avoid 没用，规范明确不支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 小表格：在外层
<div>上设break-inside: avoid（现代写法）或page-break-inside: avoid（兼容旧版） - 长表格：拆成多个独立
<table>，每个带完整<thead>，中间用<div style="page-break-before: always;"></div>分隔 - 必须保留表头：给
<thead>加display: table-header-group，否则只在第一页显示 - 别依赖
tbody分组自动分页——它不触发表头重复，也难控制断点
@media print 里必须重置的三类样式
打印预览和屏幕渲染走两套样式逻辑，很多页面正常但打印错乱，根源常在没覆盖默认值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 清除干扰边距：
body, html { margin: 0; padding: 0; }，否则@page { margin: 2cm }可能叠加出意外空白 - 禁用背景色/图：
* { background: transparent !important; }，防止打印机卡纸或墨水浪费 - 隐藏非打印元素：
.no-print { display: none !important; }，注意加!important防止框架样式覆盖 - 显式设字体大小：
body { font-size: 12px; }，避免某些浏览器缩放导致内容挤出页面
调试分页唯一有效方式：打印预览
所有分页效果在普通页面里都不可见，Ctrl+P（Windows）或 Cmd+P（macOS）打开的预览窗口才是真实环境。Chrome 和 Edge 的预览基本可信，Firefox 对 break-before: page 更保守，建议双写：break-before: page; page-break-before: always;。
容易被忽略的细节：
- 页面实际高度受
@page margin和内容padding共同影响，算错一像素就可能让本该在第一页末尾的内容掉到第二页 - 动态生成的表格行高不固定时，
page-break-inside: avoid可能导致整块内容被推到下一页，留出大片空白 - 用 JavaScript 插入分页符必须在
beforeprint事件里执行，否则打印预览可能来不及渲染
