break-inside: avoid 仅在多列布局中对触发bfc的块级卡片容器生效，若父容器未设column-count/width、卡片非block/flow-root、含absolute/flex/grid或overflow:hidden，或浏览器为ie11，则会失效。
直接加 break-inside: avoid 就行，但必须加在卡片容器上、且父容器得是多列布局，否则完全不生效。
为什么写了 break-inside: avoid 还是被截断
不是属性写错了，而是环境没配对：
- 父容器没设
column-count或column-width—— 这个属性只在多列上下文中起作用 - 卡片本身是
display: inline-block、flex或grid容器 —— 它必须是触发 BFC 的块级元素（如display: block或display: flow-root） - 卡片加了
position: absolute、float或overflow: hidden—— 这些会破坏分页上下文，让break-inside失效 - 浏览器是 IE11 或更老版本 —— 它们根本不支持
break-inside，只认page-break-inside: avoid（但现代浏览器已弱化该属性）
加在哪一层才真正有效
必须加在你要保护的卡片元素自身上，而不是它的父容器或子元素：
- ✅ 正确：
.card { break-inside: avoid; }（前提是.card是display: block且在多列容器内） - ❌ 错误：
.columns { break-inside: avoid; }（列容器加这个毫无意义） - ❌ 错误：
.card > .content { break-inside: avoid; }（子内容被切不影响卡片整体完整性） - ⚠️ 注意：如果卡片内部用 Flex/Grid 布局，只要卡片自身是块级，
break-inside: avoid仍生效
Chrome 中偶尔失效？试试 break-after: avoid + break-before: avoid 组合
单用 break-inside: avoid 在 Chrome 下有时会被绕过，尤其当相邻卡片高度接近列高时：
- 加
break-after: avoid防止下一张卡片紧贴着被挤到同一列末尾，引发“连带切断” - 加
break-before: avoid防止上一张卡片把当前卡片“顶”出本列 - 组合写法：
.card { break-inside: avoid; break-after: avoid; break-before: avoid; } - 比单用更可靠，尤其在动态内容或字体加载延迟导致重排的场景下
图片、表格这类内联替换元素怎么处理
它们默认不响应 break-inside: avoid，必须先转成块级：
- 图片加
display: block后再加break-inside: avoid - 表格整个加
display: block（注意会丢失表格语义），或外包一层<div> 再设样式 <li>避免直接对 <code><tr> 或 <code><td> 使用 <code>break-inside—— 它们天生不支持，得靠break-before: avoid或外包 div最常被忽略的一点：
break-inside: avoid不解决空间不足问题。它只保证“不切”，不保证“能放”。如果一列只剩 20px 高，而卡片高 200px，浏览器会把它整个推到下一列——看起来像失效，其实是按规范执行。这时候得检查是否真需要每张卡片都完整，还是允许少数短卡片跨列更自然。
