用@media print控制打印分页需显式声明break-before、break-after和break-inside等CSS属性，优先使用break-before: page；表格分页需组合设置thead、tbody及兜底page-break-inside；调试须通过打印预览检查真实样式应用。
用 @media print 控制打印时的分页位置
浏览器默认不会按你期望的位置分页，必须显式声明。核心是用 CSS 的 @media print 块配合分页属性，而不是靠 HTML 标签或 JS 模拟。
常见错误是只加 <hr> 或空 <div>，这些对打印引擎完全无效。真正起作用的是 page-break-before、page-break-after 和现代等效的 break-before / break-after。
-
break-before: page：强制在该元素前分页（推荐优先用这个，page-break-before在部分 Chrome 版本中已被标记为弃用） -
break-inside: avoid：防止表格、卡片等内容被截断跨页（对<table>或带display: block的容器特别有用） - 不要对
<span>或内联元素设分页属性——它只对块级元素生效 - 如果页面有固定页眉/页脚，需配合
@page规则设置margin，否则可能被裁掉
避免表格跨页断裂的实操写法
表格是最容易出问题的结构：表头消失、行被切成两半、列宽错乱。单纯设 break-inside: avoid 不够，得组合处理。
- 给
<table>加break-inside: avoid，但注意它只在父容器高度足够时才生效；如果表格本身超一页，这条会失效 - 给
<thead>加break-after: avoid，确保表头不和第一行数据分开 - 给
<tr>加break-inside: avoid效果有限，更可靠的是把每行<tr>包进一个<tbody>，再对每个<tbody>设break-inside: avoid - Chrome 115+ 对
break-inside在<table>上的支持仍不稳定，可降级用page-break-inside: avoid兜底
调试打印样式时的关键检查点
打印预览里看不到效果？大概率是样式没命中或被覆盖。别依赖“看起来像”，要查真实渲染树。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器打印预览（
Ctrl+P/Cmd+P），右键 → “检查” → 切到Styles面板，确认当前选中的元素是否应用了@media print下的规则 - 检查是否误用了
display: none或visibility: hidden—— 这些会让内容彻底不出现在打印输出中 - 如果用了 CSS-in-JS（如 Emotion、Styled Components），确认
@media print规则已注入到<head>，且未被动态移除 - PDF 导出工具（如 wkhtmltopdf）对
break-*支持更弱，测试时务必用原生浏览器打印预览，而非截图或 PDF 插件
@page 规则能做什么、不能做什么
@page 只控制纸张层面的布局，比如页边距、尺寸、方向，但它无法指定某段 HTML 出现在第几页，也不能插入页码——页码需要靠 content: counter(page) 配合伪元素实现。
-
@page { margin: 1cm; size: A4; }是安全的，所有主流浏览器都支持 -
@page :first { margin-top: 2cm; }在 Firefox 中有效，但在 Chrome 中常被忽略，慎用 - 页眉页脚内容必须用
@page+::before/::after，且只能包含纯文本或简单计数器，不能放图片或复杂 HTML - 不要指望
@page能解决内容分页逻辑问题——它只是容器，分页逻辑还得靠break-*属性控制元素行为
<link rel="stylesheet" media="print">，要确保它没被其他 !important 规则覆盖；如果内联在 <style> 里，得确认它位于所有通用样式之后。否则写了等于没写。 
