text-overflow: ellipsis 生效需同时满足三个条件：width/max-width 限制、white-space: nowrap、overflow: hidden；缺一不可，否则无效。
text-overflow: ellipsis 为什么没生效
直接原因：这个 CSS 属性只在特定条件下起作用，缺一不可。它不是“给文字加省略号”的万能开关。
常见错误现象：text-overflow: ellipsis 写了但文字照常换行、溢出容器、甚至完全没反应。
- 必须配合
white-space: nowrap（否则文字会折行，根本不会溢出） - 必须有明确的宽度限制（
width、max-width，或父容器是 flex/grid 且收缩受限） - 必须设置
overflow: hidden（否则溢出内容直接显示，不触发截断逻辑）
示例（正确写法）：
.truncate {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
单行省略在 Flex 容器里失效
Flex 项目默认会拉伸或收缩，width 常被忽略，导致 text-overflow 失效。
立即学习“前端免费学习笔记（深入）”；
使用场景：卡片标题、列表项内固定宽度区域需要单行截断。
- 给子元素加
flex-shrink: 0不解决问题——它只是不让缩，但没解决“宽度未定义”这个根本问题 - 更可靠的做法是加
min-width: 0（重置 flex 项目的最小尺寸约束），再配合width或max-width - 或者用
overflow: hidden+text-overflow的组合包裹一层，避免直接作用在 flex item 上
英文/数字长串不换行导致撑破容器
纯英文、URL、token 等连续无空格字符串，默认不会折行，white-space: nowrap 更会让它彻底失控。
这时候 text-overflow: ellipsis 依然有效，但前提是容器真能“卡住”它——而长串可能让容器本身变宽。
- 加
word-break: break-all或overflow-wrap: break-word可以强制折行，但这和“单行省略”冲突 - 如果坚持单行，必须确保父容器有刚性宽度（比如
width: 100%+ 父级有明确max-width），且自身不参与 flex 基线计算 - 注意
word-break: break-all在中英文混排时可能把中文词中间切断，overflow-wrap: break-word更安全
WebKit 浏览器里 -webkit-line-clamp 不适用于单行
display: -webkit-box + -webkit-line-clamp: 1 看似能替代 white-space: nowrap，但它实际依赖于 box 模型的文本布局，行为不稳定。
性能 / 兼容性影响：该方案在 Safari 和旧版 Chrome 里支持良好，但 Firefox 完全不支持，且在某些嵌套场景下会忽略 overflow: hidden。
- 不要用
-webkit-line-clamp: 1替代标准单行截断方案——它本就不是为单行设计的 - 它的渲染路径更重，尤其在滚动列表中大量使用时，可能引发重排开销
- 若真要用多行省略，请确认已加
-webkit-box-orient: vertical，否则无效
text-overflow 就只是个摆设。 
