text-overflow: ellipsis 不生效是因为未同时满足三个条件：white-space: nowrap、overflow: hidden 和明确的宽度限制（如 width 或 max-width）；多行省略需用 -webkit-box 方案。
text-overflow: ellipsis 为啥不生效？
它只在特定条件下起作用，不是加了就自动截断。常见现象是文字照常换行或撑开容器，text-overflow: ellipsis 完全没反应。
- 必须同时设置
white-space: nowrap（单行强制不换行） - 必须有明确宽度限制，比如
width、max-width，或父容器为flex且子项未设flex-shrink: 0 - 必须搭配
overflow: hidden，三者缺一不可 - 对多行文本无效——
text-overflow只支持单行
单行省略号的最小可行写法
这是能跑通的最简组合，复制粘贴就能用，别加多余属性干扰判断：
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
注意：width 值要真实存在，不能是 auto 或未设置；如果父容器用 display: flex，子元素可能需要额外加 min-width: 0 防止 flex 伸展破坏截断逻辑。
多行文本想省略号怎么办？
CSS 原生不支持 text-overflow: ellipsis 多行，但可用 display: -webkit-box 方案兜底，仅限 WebKit 内核（Chrome/Safari）：
- 必须用
display: -webkit-box - 配合
-webkit-line-clamp: 2控制行数 - 必须加
-webkit-box-orient: vertical - 同样依赖
overflow: hidden和固定高度/最大高度
示例：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 3em;
}
Firefox 和部分旧版 Edge 不支持该方案，需 JS 回退或接受不显示省略号。
Flex 容器里 text-overflow 失效的典型坑
Flex 子项默认会拉伸，导致 width 被忽略，text-overflow 直接失效。错误写法：flex: 1 后又只设 width。
- 解决方法一：加
min-width: 0，让 flex 项允许收缩 - 解决方法二：用
flex: 0 1 auto替代flex: 1 - 避免对 flex 子项直接设
width而不控收缩行为 - 调试时可临时加
background: red看实际渲染宽度是否如预期
真正卡住人的往往不是语法，而是三个条件没凑齐，或者 flex 场景下忘了 min-width: 0 这种反直觉的补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
