break-inside: avoid可防止块级元素在多列中被截断，需加在子容器上而非列容器，兼容现代浏览器但可能导致列高不均。
多列布局中元素被切断的典型表现
用 column-count 或 column-width 做多列时，<div>、<code><p></p> 甚至 <li> 经常在列末被硬生生截断——上半截在左列，下半截跳到右列，视觉上像被刀劈开。这不是渲染 bug，是浏览器默认允许跨列断行的正常行为。
根本原因是：CSS 多列布局把内容当“流体文本”处理，不主动保护块级容器的完整性。
break-inside: avoid 是什么，为什么它能起作用
break-inside: avoid 告诉浏览器：“这个元素内部不允许发生分列（或分页、分栏）断点”。它不是让元素强制撑满一列，而是阻止浏览器把它的开头和结尾拆到不同列里。
注意：它只对**非绝对定位、非浮动、正常流中的块级容器**生效；对 <span></span> 或内联元素无效；也不能防止文字本身在单词间断行。
立即学习“前端免费学习笔记（深入）”；
常见误用：break-inside: avoid-page 或 avoid-column —— 这些是旧草案写法，现在统一用 avoid 即可，现代浏览器都支持。
实际怎么加，加在哪一层最有效
直接加在你想保护的容器上，比如卡片、文章段落、列表项：
.card {
break-inside: avoid;
}
但要注意层级关系：
- 如果父容器已设
column-count: 3，子元素加break-inside: avoid才会起作用 - 不要加在 column 容器本身（比如
.columns { break-inside: avoid; }），这没意义 - 如果子元素是 flex 或 grid 容器，且内部有换行需求，
break-inside: avoid仍生效，但需确保其自身不被其他规则（如display: inline-block）破坏块格式化上下文 - 某些场景下需要配合
page-break-inside: avoid（用于打印样式）或break-after: avoid（防下一个元素紧贴着被切）
兼容性与容易被忽略的副作用
break-inside: avoid 在 Chrome 50+、Firefox 68+、Safari 11.1+、Edge 79+ 均稳定支持。IE 完全不支持，但 IE 已无多列布局原生支持，所以不用额外降级。
真正容易出问题的是高度溢出：
- 如果一列空间不够放下整个
.card，浏览器会把它整体推到下一列——可能导致最后一列大量留白，甚至整列空着 - 若多个
break-inside: avoid元素高度总和超过单列可用高度，它们会依次挤占后续列，造成列高严重不均 - 没有 JavaScript 干预时，无法动态调整列数来适配内容；别指望它“智能重排”，它只做“不切断”这一件事
遇到列高失衡，优先检查是否真有必要让每个卡片都完整——有时允许个别短卡片跨列反而更自然。强行保完整，代价就是布局僵硬。
