多列布局中text-overflow: ellipsis默认不生效，因其仅适用于单行块级元素，而多列会自动分栏破坏单行前提；应将每项单独包裹并设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis。
多列布局（column-count 或 column-width）中，text-overflow: ellipsis 默认不生效，是因为该属性仅对**单行块级元素**（且需满足特定条件）起作用，而多列会将文本自动分段、换列，破坏了“单行截断”的前提。
原因：多列布局与 ellipsis 的机制冲突
text-overflow: ellipsis 要求元素同时满足：
– display 为 block 或 inline-block（不能是 column 容器本身）
– white-space: nowrap（强制单行）
– overflow: hidden
– 有明确宽度（或父容器有约束）
但多列容器（如 column-count: 3）内部文本是自然流式分栏的，无法被当作“一行”处理，所以 ellipsis 被忽略。
解决方案：用 flex + 单行容器模拟“伪多列”
若目标是让**每列标题/短文本**在固定宽度内截断，不要直接对多列容器设 ellipsis，而是把每一项单独包裹，并控制其自身截断：
- 外层用
columns: 3布局列表容器（仅负责分栏） - 每个列表项（
li或div）设为display: block，并添加：white-space: nowrap;overflow: hidden;text-overflow: ellipsis; - 确保每项有固定最大宽度（如
max-width: 100%;或具体像素值），避免撑开列宽
✅ 示例结构：
<div class="col-container">
<div class="item">这是一段很长的标题文字</div>
<div class="item">另一条也超长的说明文本</div>
<!-- 更多项... -->
</div>
<p>.col-container { columns: 3; }
.item {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px; /<em> 避免列间粘连 </em>/
}</p>替代方案：CSS Grid 搭配显式截断更可控
如果兼容性允许（现代浏览器），用 display: grid 替代多列，逻辑更清晰：
- 设定列数：
grid-template-columns: repeat(3, 1fr) - 每项仍独立设置
white-space: nowrap+ellipsis - Grid 不会打断文本流，截断行为稳定，且支持响应式重排
注意：别对多列容器本身设 ellipsis
以下写法无效：
.columns {
columns: 3;
white-space: nowrap; /* ❌ 多列下此声明无意义 */
text-overflow: ellipsis; /* ❌ 不生效 */
overflow: hidden;
}因为 columns 是布局模式，不是文本容器；真正承载文本的是子元素，截断必须落在子元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
