text-overflow: ellipsis生效必须同时满足四个条件：white-space: nowrap、overflow: hidden、明确宽度（width/max-width）、容器为块级或设display:block/inline-block；flex子项还需加min-width: 0。
text-overflow: ellipsis 本身不会生效，必须和 white-space: nowrap、overflow: hidden、明确的宽度约束三者共存，缺一不可。
为什么加了 text-overflow: ellipsis 却没显示省略号
最常见原因是漏掉组合条件中的某一项。比如只写了 text-overflow: ellipsis，但没设 white-space: nowrap，文本就自动换行了，根本不会触发溢出逻辑；或者写了 overflow: hidden，但容器没设 width 或 max-width，浏览器无法判断“哪里算溢出”。
另外要注意：内联元素（如 <span></span>）默认不响应 width，直接加这些样式无效，得先加 display: inline-block 或 display: block。
-
white-space: nowrap是强制单行的前提，不是可选优化 -
overflow: hidden必须是hidden、scroll或auto，visible会彻底绕过截断逻辑 - 宽度必须是计算后确定的值，百分比宽度在 flex 容器里可能被重置，
max-width通常更稳妥
flex 子项中 text-overflow 不生效的典型场景
Flex 布局下，子项默认 flex-shrink: 1，会主动压缩自身宽度来适应容器。即使你写了 width: 200px，也可能被压缩到远小于该值，导致文本根本没机会溢出。
解决办法是显式控制收缩行为：
立即学习“前端免费学习笔记（深入）”；
- 加
flex-shrink: 0阻止压缩 - 用
min-width: 0配合overflow: hidden，避免 flex 算法干扰宽度计算 - 父容器必须有明确宽度（比如
width: 100%且祖先链上无width: auto的未约束容器）
浏览器兼容性与前缀要不要加
现代浏览器（Chrome 149、Firefox 128、Safari 17+、Edge 115+）都已原生支持 text-overflow: ellipsis，无需前缀。
但如果你仍需支持 IE10 及更早版本，要加 -ms-text-overflow: ellipsis；IE6–7 还需触发 hasLayout，比如加 zoom: 1 或 height: 1%。
移动端 WebView（尤其是 Android 4.x 内置浏览器）偶有渲染延迟：光标进入或编辑时，省略号可能临时退化为 clip 行为，这是已知渲染缺陷，无 CSS 规避方案，只能接受或降级处理。
JavaScript 动态设置 text-overflow 的注意事项
通过 JS 设置时，要用 element.style.textOverflow = 'ellipsis'，注意属性名是驼峰写法 textOverflow，不是连字符形式。
但 JS 设置仅影响内联样式，若存在更高优先级的 CSS 规则（比如带 !important 的类），会被覆盖。更稳妥的做法是操作 class：
- 预先定义好
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } - 运行时用
el.classList.add('truncate')
别忘了：JS 改完样式后，如果元素宽高依赖 JS 计算（比如基于 offsetWidth），要确保 DOM 已完成重排，必要时用 getComputedStyle(el).width 强制触发。
text-overflow: ellipsis 看似简单，真正卡住人的从来不是语法，而是宽度计算路径是否干净、flex 或 grid 是否悄悄劫持了尺寸、以及内联元素有没有被当“透明人”忽略掉 display 转换。 
