text-overflow: ellipsis生效必须同时满足四个条件：white-space: nowrap、overflow: hidden、容器有明确宽度（如width或max-width）、容器非inline元素；缺一不可。
text-overflow: ellipsis 能用，但必须和 white-space: nowrap、overflow: hidden 配合，且容器宽度不能是“自动”的——这是唯一能稳定生效的组合。
为什么单行省略号有时不显示？
最常见原因是三个条件缺一：
- 没设 white-space: nowrap：文本会换行，text-overflow 不触发；
- 没设 overflow: hidden：溢出内容直接露出来，没机会裁剪；
- 容器宽度未约束：比如 width: auto 或父元素没宽，浏览器无法判断“哪里算溢出”；
- 对 <span></span> 等行内元素直接加样式：需先加 display: inline-block 或 display: block。
兼容性要点与写法建议
现代浏览器（Chrome 1+、Firefox 7+、Safari 3.1+、Edge 12+、IE 6+）都支持这组属性，但 IE 6–7 需要触发 hasLayout：zoom: 1 或 height: 1%。
推荐写法包含前缀和防御性声明：
.ellipsis {
width: 200px; /* 或 max-width: 100% */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis; /* IE8 及更早 */
}注意：-webkit-text-overflow 已废弃，不用加；移动端 WebView（如 iOS 15+、Android Chrome）无需额外处理。
响应式场景下容易踩的坑
在 flex 或 grid 布局中，子项默认不收缩，max-width: 100% 可能无效：
- 对 flex 项目加
min-width: 0，否则它会撑开容器导致省略失效； - 表格单元格需配合
table-layout: fixed，否则white-space: nowrap会被忽略； - 使用
vw或百分比时，确保父容器有明确宽度（比如body { width: 100vw }），否则计算链断裂。
真正难的不是写对那三行 CSS，而是确认整个宽度计算链上没有一个环节是“自动”或“未定义”的——哪怕只有一层父元素宽度假设失败，省略号就彻底消失。
立即学习“前端免费学习笔记（深入）”；
