必须同时设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，且容器需有明确宽度；white-space: nowrap是强制单行的前提，缺则文本换行导致省略号不触发。
white-space: nowrap 没写，文本早就换行了
这是最常被忽略的一步。text-overflow: ellipsis 只在单行内联方向溢出时生效，而 white-space: nowrap 是让它“变成单行”的前提。如果漏掉它，浏览器默认用 white-space: normal，文本会在空格、连字符或中文词间自动折行——根本没机会溢出到行尾，text-overflow 就像开关没通电，完全不触发。
常见陷阱：
- 全局 reset 或 normalize.css 把
white-space设回normal，你没覆盖 - 父容器用了
flex-wrap: wrap，但子元素没显式禁用换行 - 写了
display: inline-block却忘了配white-space: nowrap
overflow: hidden 不在同一个元素上
overflow: hidden 必须写在**和 text-overflow 相同的元素上**，不能只写在父容器里。否则文本会照常撑开子元素或换行，子元素自己没裁剪，text-overflow 就无从谈起。
特别注意：
- 表格单元格（
td）里写了overflow: hidden但没加table-layout: fixed→ 列宽由内容撑开，实际没裁剪 - Flex 子项写了
overflow: hidden，但没设min-width: 0→ 默认min-width: auto强制保留最小内容宽度，overflow形同虚设 - 用了
overflow: auto或scroll→ 滚动条出现，但省略号不一定显示（部分浏览器只对hidden生效）
宽度没真正锁住：flex、table、inline 元素全踩坑
没有明确的 width 或 max-width，浏览器就不知道“哪算溢出”。flex: 1、width: auto、未约束的 inline 元素，都不算有效宽度约束。
各场景要点：
-
display: inline元素（如span）即使写了全部样式也不会生效，必须加display: block或inline-block - Flex 子项要加
min-width: 0（关键！），否则flex-shrink也缩不到能触发溢出的程度 - 表格列要配合
table-layout: fixed+width或max-width才能压住列宽 -
font-size: 0或line-height: 0会导致省略号渲染失败（视觉上没点，其实已截断）
-webkit-line-clamp 多行省略为什么在 Firefox 里没反应？
因为它是 WebKit/Blink 私有属性，Firefox 直到 117+ 版本才开始支持，旧版完全无视。它不是标准 text-overflow 的延伸，而是另一套机制：display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: N。
必须同步满足：
-
overflow: hidden（text-overflow: ellipsis在这里只是可选增强） - 容器高度不能硬写
height，推荐用max-height+line-height计算（例如 2 行 ≈max-height: 3em） - Flex 容器里的子项要加
align-self: flex-start或min-width: 0，否则宽度计算异常导致截断失效 - 服务端截断或 JS 动态计算仍是跨浏览器最稳方案，尤其当内容中英文混排、字体不统一时
真正麻烦的不是语法记不住，而是不同布局下约束条件互相打架：Flex 要 min-width: 0，表格要 table-layout: fixed，多行要 -webkit-line-clamp 加 fallback——这些不是可选配置，是缺一不可的执行链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
