page-break-inside: avoid 已被现代浏览器弃用，仅对 static/relative 块级元素“尽力而为”；应改用 @media print 中的 break-inside: avoid-page，并作用于 table、div 等块级容器，而非 tr、td 或 flex 子项。
page-break-inside: avoid 在现代浏览器中基本失效，尤其对 table、tr、flex 子项等结构完全不起作用——这不是你写错了，是规范和实现早已淘汰它。
为什么 page-break-inside: avoid 经常没反应
这个属性属于 CSS2 打印模块，W3C 已明确建议弃用。Chrome ≥ 80、Firefox ≥ 65、Safari ≥ 14.5 均不再可靠响应 avoid 值；它只对 position: static/relative 的普通块级元素“尽力而为”，且无法穿透表格行、浮动容器或弹性布局内部。
-
tr、td、img（作为替换元素）天然不支持该属性 - 即使加了
@media print，若父容器是display: flex或grid，整个规则会被忽略 - 旧版写法如
page-break-inside: avoid !important也无济于事——不是优先级问题，是引擎压根不处理
真正有效的替代方案：用 break-inside: avoid-page
W3C Paged Media Level 3 规范推荐使用 break-inside，并显式指定 avoid-page 而非模糊的 avoid，才能让浏览器识别这是打印分页场景。
- 必须包裹在
@media print中，否则无意义 - 只对块级容器生效（如
div、section、figure、pre、table），不能加在tr或p上指望它包住整段内容 - 对表格整体有效，但要配合
thead { display: table-header-group }才能保证表头每页重现
示例：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
@media print {
.report-card, figure, pre, table {
break-inside: avoid-page;
}
thead {
display: table-header-group;
}
}
表格行（tr）被劈开？别碰 page-break-inside，换思路
给 tr 加 page-break-inside: avoid 是无效的典型操作。浏览器根本不把表格行当作可分页的块级盒。
- 小表格：直接给
table加break-inside: avoid-page，强制整表不跨页 - 长表格：放弃保护单行，转而用
tbody tr { break-inside: avoid; }（注意：这里用的是break-inside，不是page-break-inside；部分新版 Chrome/Firefox 对此有有限支持，但不保证） - 更稳做法：用
page-break-after: auto配合break-inside: avoid-page控制 tbody 分段节奏，再靠thead自动复现 - 边框问题：务必加
border-collapse: collapse，否则打印时边框可能重复渲染
哪些地方加了也白加？三类硬限制
以下情况即使写了 break-inside: avoid-page 也大概率失败：
-
tr、td、th等表格子元素——它们不是独立的分页上下文 - 绝对定位（
position: absolute）或固定定位（position: fixed）元素——脱离文档流后失去分页控制权 - 内联容器（
display: inline、inline-block）或 flex/grid 直接子项——需提升到其父块级容器上设置
最易被忽略的一点：分页控制只对「内容高度超过单页剩余空间」时才触发；如果一个 div 高度只有 200px，而当前页还剩 800px，浏览器根本不会尝试切它——所以测试时得用足够长的内容，否则看不出效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
