仅靠 overflow 属性无法单独实现文字溢出显示省略号，必须同时满足：white-space: nowrap、text-overflow: ellipsis、固定宽度（或块级约束）且 overflow: hidden。
直接说结论：仅靠 overflow 属性无法单独实现「文字溢出显示省略号（…）」，必须配合 white-space、text-overflow 和固定宽高（或块级约束）三者缺一不可。
为什么 overflow: hidden 不生效？
很多人写 overflow: hidden 发现长文本照常换行或撑开容器——这是因为 overflow 控制的是「内容区域超出容器边界时的裁剪行为」，而默认的文本流是允许换行的，根本没“溢出”。
要触发溢出，得先让文本变成「单行不换行」：
-
white-space: nowrap：强制文本不换行（关键！） - 容器必须有明确宽度（如
width: 200px或max-width），且为块级元素（display: block或inline-block） -
overflow: hidden才能真正截断超出部分
text-overflow: ellipsis 是怎么工作的？
text-overflow 不是独立生效的属性，它只在同时满足以下条件时才显示省略号：
立即学习“前端免费学习笔记（深入）”；
- 容器
overflow值为hidden、scroll或auto -
white-space为nowrap（单行）或pre/pre-wrap（但省略号只对单行可靠） - 容器宽度有限，且内容实际宽度 > 容器宽度
常见错误写法：
div {
overflow: hidden;
text-overflow: ellipsis;
}——漏了 white-space: nowrap，省略号永远不会出现。
多行文本省略号怎么搞？
CSS 原生不支持 text-overflow: ellipsis 多行（line-clamp 是现代方案，但非所有旧浏览器支持）。
稳妥做法（兼容性好）：
- 用
display: -webkit-box+-webkit-line-clamp（仅 WebKit 内核） - 必须加
-webkit-box-orient: vertical - 仍需
overflow: hidden
示例（3 行省略）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}注意：-webkit-line-clamp 在 Firefox 和旧版 IE 中完全无效，服务端截断或 JS 方案更可控。
容易被忽略的细节
这些点不处理，省略号可能消失或布局错乱：
- 父容器若设了
display: flex，子元素需加min-width: 0防止 flex 项目不收缩（否则overflow失效） - 内联元素（如
span）必须显式设display: inline-block或block，否则width和overflow不起作用 - 字体渲染差异可能导致省略号位置偏移，建议统一使用
font-family和line-height - 如果容器用
max-width而非width，要确保其实际计算宽度确实小于内容宽度，否则不触发
最常卡住的地方不是语法写错，而是忘了 white-space: nowrap 或容器没设宽度——这两条没配齐，后面全白搭。
