text-overflow: ellipsis必须与overflow: hidden、white-space: nowrap及明确宽度（width或max-width）三者共存才生效；缺一不可，且Flex/Grid中还需加min-width: 0。
text-overflow: ellipsis 必须和 overflow:hidden、white-space:nowrap 一起用
单独写 text-overflow: ellipsis 不会生效。它只是一个“触发器”，只在文本真正溢出且被裁剪时才显示省略号，而裁剪动作依赖 overflow: hidden，溢出前提依赖 white-space: nowrap。
常见错误现象：写了 text-overflow: ellipsis 却没效果，大概率是漏了其中一项，或者容器没设宽度。
-
white-space: nowrap强制单行，否则文本换行后不会“溢出” -
overflow: hidden是裁剪动作本身，没有它，文本直接撑开容器或跑出去 -
text-overflow: ellipsis只负责在裁剪边界画 …，不参与布局控制
容器必须有明确宽度（width 或 max-width）
如果父容器是 display: block 且没设宽，它默认占满一行，white-space: nowrap 会让内容横向无限延伸，根本不会触发溢出 —— 所以 width 或 max-width 是硬性条件。
示例有效写法：
立即学习“前端免费学习笔记（深入）”；
.title {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
容易踩的坑：
- 对
<span></span>这类内联元素直接加这些样式无效，需先加display: inline-block或display: block - 用
flex子项时，若父容器没设宽或子项flex-shrink: 0，也可能导致宽度计算异常，省略号不出现 - 百分比宽度在某些嵌套场景下可能被重置，建议用
max-width更稳妥
兼容性要点：IE 和旧版 Opera 需要前缀
现代浏览器（Chrome/Firefox/Safari/Edge）都支持标准写法，但 IE9–11 要求 -ms-text-overflow: ellipsis，旧版 Opera（-o-text-overflow: ellipsis。
实际项目中可这样写：
.ellipsis {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
注意：text-overflow 本身不支持 clip 以外的字符串自定义（比如用“…”以外的符号），且仅对块级或 inline-block 元素起作用。
text-overflow 不适用于多行，别强行套用
text-overflow: ellipsis 在规范里只定义了单行行为。即使你给多行容器加上它，也不会在第二行末尾显示省略号 —— 它只会作用于最后一行的末尾，前提是那一行本身满足单行溢出条件（即该行被 nowrap 锁死），而这和“多行截断”目标完全冲突。
想实现多行省略，必须换方案：-webkit-line-clamp 或 JS 计算截断。硬套 text-overflow + height + overflow: hidden 只会切掉文字下半部分，不显示省略号。
真正容易被忽略的一点：很多开发者以为只要加了 text-overflow 就万事大吉，却忘了它本质是个“被动响应式属性”——它不主动截断，只在其他属性制造出裁剪后才露面。逻辑链缺一不可。
