text-overflow: ellipsis单独无效，必须与white-space: nowrap、overflow: hidden及明确宽度（或min-width: 0用于flex子项）三者配合才能生效，缺一不可。
text-overflow: ellipsis 单独写没用，它只负责“画省略号”，不控制截断。真正起作用的是 white-space: nowrap、overflow: hidden 和明确宽度三者配合。
为什么写了 text-overflow: ellipsis 却没反应
常见现象：文字照常换行、溢出容器、或整段被裁掉但没省略号。根本原因是漏了至少一项前置条件：
-
white-space: nowrap没设 → 文字在空格处自动折行，压根不会“溢出”到单行末尾 -
overflow: hidden没设 → 溢出内容直接显示，省略号没机会出场 - 容器没设
width或max-width→ 浏览器不知道“哪里算溢出”，连截断逻辑都不触发 - 父容器是
display: flex，子项没加min-width: 0→ flex 项默认最小宽度撑开容器，导致截断失效
white-space: nowrap 和 pre 别混用
white-space: pre 保留所有空格和换行符，且完全禁止折行，容易被长 URL 或连续无空格字符串（如 aaaaaaaaaaaaaaaaaa）撑宽容器，反而让 text-overflow 失效。
真实项目中更稳妥的选择是：
-
white-space: nowrap：合并空白符，强制单行，适合标题、标签、表格单元格 -
white-space: pre-wrap：保留换行和空格，但允许在空格处折行；若需保留格式又想支持省略，得额外加overflow-wrap: break-word
Flex 容器里怎么写才可靠
在 display: flex 的父容器中，子项即使写了 white-space: nowrap 和 overflow: hidden，也常因 flex 默认的 min-width: auto 导致截断失败。
正确写法必须包含 min-width: 0：
.flex-item {
flex: 0 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
响应式场景下，建议用 max-width: 100% 替代固定 width，再配合 box-sizing: border-box 防止边框撑大。
高度和字体变化会破坏省略效果
这个方案对布局非常敏感：
- 如果容器
height被硬设（比如height: 24px），而font-size或line-height变动，可能切掉半行字 - 中文、emoji、全角符号渲染宽度不一致，纯靠字符数截断容易错位或撑破容器
- 表格单元格里用
text-overflow: ellipsis时，table-layout: fixed更稳定，否则列宽可能被内容撑开
最易被忽略的一点：省略号只在块级或 inline-block 元素上生效，<span></span> 这类行内元素必须先设 display: block 或 display: inline-block 才能触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
