break-inside: avoid加了仍被截断，是因为未满足生效条件：父容器未设column-count/column-width、卡片非块级（如inline-block/flex/grid）、含absolute/float/overflow:hidden，或浏览器为IE11。
加了 columns 后内容被劈开，不是写错了，是浏览器默认允许在任意块级元素内部断开——break-inside: avoid 能解决，但必须加对位置、配对环境、避开干扰项。
为什么 break-inside: avoid 加了还是被截断
这不是属性失效，而是它根本没进入生效条件：
-
columns容器本身没设column-count或column-width—— 该属性只在多列上下文中起作用 - 目标元素（如
.card）是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（但现代项目通常已不需兼容）
break-inside: avoid 必须加在哪一层才真正起作用
不能加在多列容器上，也不能加在子内容里，只能加在「你想保护不被切开的那个视觉单元」的直接父元素上：
- ✅ 正确：
.card { break-inside: avoid; }（前提是.card是块级、在多列容器内） - ❌ 错误：
.columns { break-inside: avoid; }（列容器加这个无意义） - ❌ 错误：
.card > p { break-inside: avoid; }（段落本就该断；且切不开p不等于保得住整个卡片） - ⚠️ 特别注意：如果
.card内部用了display: flex，只要它自身仍是块级，break-inside仍生效；但如果它高度被height或max-height固定，又撑不出内容，可能掩盖断裂但实际已丢失部分渲染
Chrome 和 Safari 下 break-inside: avoid 偶尔失灵怎么办
单用 break-inside: avoid 在 Chrome 中容易被绕过，尤其相邻卡片高度接近列高、或字体加载延迟引发重排时。更可靠的写法是组合控制：
- 用
break-before: avoid防止上一张卡片把当前卡片“顶”出本列 - 用
break-after: avoid防止下一张卡片紧贴着挤进来，导致列末空间不足而触发强制断裂 - 推荐写法：
.card { break-inside: avoid; break-before: avoid; break-after: avoid; } - 对图片、
<table> 等内联替换元素，先转成块级：<code>img { display: block; break-inside: avoid; }，否则无效容易被忽略的副作用和调试要点
break-inside: avoid只保证“不切”，不解决“放不下”：- 如果一列只剩 20px 高度，而
.card高 200px，浏览器会把它整体推到下一列——可能导致最后一列大片留白，甚至整列空着 - 大量使用会触发额外重排计算，尤其配合
column-fill: balance（默认值）时更明显；可尝试设为column-fill: auto - 调试时务必打开 DevTools 的 Layout 面板，勾选 “Show column boundaries”，确认断裂点是否落在你加了
break-inside: avoid的元素边界上 - Safari ≤15.6 对该属性支持不稳定，旧版需补
page-break-inside: avoid；Firefox 则需额外加page-break-inside: avoid才完整兼容（打印场景也需覆盖）
- 如果一列只剩 20px 高度，而
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
