break-inside: avoid 仅对正常流中触发BFC的块级容器（如display: block）生效，不适用于inline、flex/grid容器本身、绝对定位或浮动元素，且依赖父容器启用多列布局。
break-inside: avoid 能解决多列布局中元素被“腰斩”的问题，但不是万能胶——它只对正常流中的块级容器生效，且无法对抗空间不足时的强制换列。
哪些元素加了 break-inside: avoid 才有效
这个属性只在满足以下条件的元素上起作用：
-
display是block、flow-root、list-item等块格式化上下文（BFC）触发值，不能是inline、inline-block、flex或grid容器本身（注意：子项可以是 flex/grid，只要容器自身是块级） - 元素未设置
position: absolute或float - 父容器启用了多列布局（如
column-count或column-width），否则该声明无实际影响 - 不要加在 column 容器上（比如
.columns { break-inside: avoid; }），这毫无意义
为什么写了 break-inside: avoid 还是被切断了
常见失效原因不是写错了，而是环境不匹配或浏览器兜底逻辑介入：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- IE11 及更早版本完全不支持
break-inside，仅识别旧式page-break-inside: avoid（但 Firefox/Chrome/Safari 对后者avoid值支持极差） - 单列高度不足以容纳整个元素时，浏览器会把它整体推到下一列——看起来像“没生效”，其实是按规范执行的“避免切断”行为
- 若元素内含
overflow: hidden且内容溢出，可能破坏 BFC，导致break-inside失效 - 使用了
transform、will-change等触发合成层的属性，某些浏览器会忽略分列控制
导出 PDF（如 html2pdf.js）时 break-inside 为啥基本无效
html2pdf.js 不走原生打印分页管线，而是把 DOM 渲染成 canvas 图片再拼页，因此绝大多数 CSS 分页属性被忽略：
立即学习“前端免费学习笔记（深入）”；
-
break-inside: avoid和page-break-inside: avoid在多数 html2pdf 版本中不生效 - 真正可用的是
page-break-before: always和page-break-after: always，它们能强制插入分页符 - 表格行断裂最稳妥的解法是拆成多个独立
<table>，每个加page-break-inside: avoid !important - 如果必须保内容完整，建议用 JavaScript 预估每页像素高度，在合适位置插入带
page-break-before: always的空<div>
真正容易被忽略的点是：没有“自动重排”这回事。break-inside: avoid 只做一件事——不让一个块跨列/跨页。它不会帮你调列数、缩字体、删空白，也不会让布局更紧凑。你得先确保单列有足够空间，或者接受留白换完整。
