columns-fill: balance 在富文本编辑器中常失效，因其依赖静态内容高度预判，而动态编辑会触发 auto 填充；需配合固定 height/max-height、break-inside: avoid 及事件后强制重排才能可靠工作。
为什么 columns-fill: balance 在编辑器里经常不生效
因为 HTML 编辑器（尤其是富文本编辑器如 contenteditable 区域）默认内容是流式、动态可编辑的，而 columns-fill: balance 依赖浏览器对**静态内容高度的预判**。一旦内容可实时增删、光标跳转或内联样式干扰，渲染引擎常退化为 columns-fill: auto —— 也就是“从上到下填满一栏再进下一栏”，导致左右栏高度差异明显。
常见现象包括：输入回车后右侧栏突然变空、粘贴大段文字后第一栏堆满、用 document.execCommand 插入节点后分栏错乱。
-
columns-fill: balance只在多列容器有明确height或max-height时才可靠触发（否则浏览器按“无限高”处理，直接 auto 填充） - 编辑器中频繁 DOM 变更会打断重排（reflow），导致 balance 逻辑被跳过
- Chrome 和 Safari 对
contenteditable+ CSS columns 的 balance 支持更弱；Firefox 相对稳定但仍有光标定位偏差
给 contenteditable 容器加 columns-fill 的最小可行配置
不是只写 column-fill: balance 就够了。必须配合显式高度约束和重排兜底机制：
<div contenteditable="true" style="
column-count: 2;
column-gap: 24px;
column-fill: balance;
height: 500px; /* 必须设固定 height 或 max-height */
overflow-y: auto; /* 防止内容溢出破坏布局 */
break-inside: avoid; /* 防止单个块级元素被跨栏切断 */
"></div>
- 去掉
height或用min-height代替 →balance大概率失效 - 若需响应式高度，改用
max-height: 60vh并监听resize后手动触发el.style.height = el.scrollHeight + 'px' -
break-inside: avoid能防止<p></p>、<h3></h3>等被切开，但对内联元素（如<span></span>）无效
动态内容更新后强制重平衡的实操方法
用户每敲一个字、粘贴一段文本、删除一个节点，都可能让分栏失衡。不能等浏览器自动重排 —— 得主动干预：
- 监听
input、paste、cut事件，在回调末尾加el.style.columnFill = 'balance'; setTimeout(() => el.style.columnFill = '', 0);（触发重计算） - 更稳妥的做法：在事件后
requestAnimationFrame(() => { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; })，强制浏览器重新测量并应用 balance - 避免用
innerHTML = innerHTML触发重绘 —— 这会丢失光标位置和选区；优先用Text.splitText()或RangeAPI 局部更新
注意：频繁修改 style.height 可能引发 layout thrashing，建议节流（如 setTimeout 防抖 100ms）。
替代方案：当 CSS columns 真的撑不住编辑场景时
如果编辑器需要支持复杂嵌套（表格、代码块、拖拽组件）、频繁格式切换或跨浏览器一致表现，CSS columns 本质就不适合——它设计初衷是静态排版，不是交互容器。
- 用 JavaScript 分栏库如
columnizer或手写分段逻辑：把内容按字符数/节点深度切片，分别注入两个<div class="col">，绕过原生 columns 限制<li>放弃视觉“均匀”，改用 <code>display: flex; flex-wrap: wrap+ 固定子项高度，用 JS 动态分配 DOM 节点到左右容器（更适合可拖拽、可折叠的编辑器） - 最简方案：禁用
columns-fill，接受auto行为，用column-rule和间距营造“类分栏”感，专注内容编辑体验而非像素级均衡
真正难的不是让两栏看起来一样高，而是让光标、撤销栈、协作光标、语法高亮这些功能不因分栏逻辑崩掉 —— 很多团队最后发现，砍掉 columns、用单列滚动 + 左右分屏视图，反而更稳。
