text-overflow: ellipsis单独无效，因它仅定义溢出时的显示方式，不触发截断；必须与white-space: nowrap（强制单行）、overflow: hidden（裁剪溢出）及明确width/max-width（提供溢出判定依据）三者共存才生效。
必须同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，缺一不可；且容器必须有明确宽度（width 或 max-width）。
为什么 text-overflow: ellipsis 单独写没用？
这个属性本身不触发截断行为，它只定义“当内容已经溢出时，怎么显示”。真正起裁剪作用的是 overflow: hidden，而让它能“检测到溢出”的前提是文本不能换行——也就是 white-space: nowrap。三者是链条关系：
-
white-space: nowrap把所有文字压成一行，制造“可能溢出”的前提 -
overflow: hidden实际裁掉超出部分 -
text-overflow: ellipsis在裁剪边界处画出省略号
width 为什么非设不可？
CSS 不会凭空知道“哪里算溢出”。如果容器没有显式宽度（比如 div 默认 width: auto），浏览器会按内容撑开，永远不触发溢出逻辑。常见错误写法：
.bad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 缺少 width，无效 */正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.good {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}注意：max-width 也有效，适合响应式场景；但 min-width 不行。
哪些元素默认不生效？
原生行内元素（如 span、a）即使加了这些规则也不会截断，因为它们不参与块级盒模型的尺寸计算。解决方法只有两个：
- 加
display: inline-block或display: block - 直接用块级标签（如
div、p）包裹文本
另外，flex 或 grid 子项若未设 min-width: 0，也可能因 flex item 默认最小尺寸限制导致截断失效。
IE 和旧版 Edge 的兼容写法
IE8+ 支持 text-overflow: ellipsis，但需要加前缀：
.ie-safe {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
}现代项目中可忽略 IE，但若需支持旧系统，-ms- 前缀仍建议保留。Firefox 和 Chrome 等主流浏览器无需前缀。
最容易被忽略的一点：省略号只在**水平方向溢出**时生效。如果你用 flex-direction: column 或设置了 height + overflow: hidden，但没配 white-space: nowrap，那它不会显示省略号——哪怕内容明显超出了高度。
