text-overflow: ellipsis需同时满足三个前提：white-space: nowrap、overflow: hidden及明确宽度限制；Flex子项需加min-width: 0或flex-shrink: 0；多行截断推荐JavaScript或line-clamp（注意兼容性）；字体差异影响溢出位置，真机测试必不可少。
text-overflow: ellipsis 在移动端不生效的常见原因
直接加 text-overflow: ellipsis 却没省略号？大概率是漏了三个必要前提条件。它不是独立生效的属性，而是一套组合拳。
-
white-space: nowrap必须设置，否则文字换行，根本不会“溢出” -
overflow: hidden必须设置，否则溢出内容直接显示出来，没机会触发省略 - 元素必须有**明确宽度限制**（如
width、max-width，或受父容器约束的固定尺寸），百分比或fit-content在某些场景下不可靠
Flex 容器里 text-overflow 失效怎么办
在 display: flex 的子项上设 text-overflow 是高频翻车点——因为默认 flex-shrink: 1 会让文本容器被压缩，但压缩行为和 overflow 触发时机冲突，导致省略号不出现。
- 给文本容器加
flex-shrink: 0，阻止它被压缩（适合固定宽度场景） - 更通用的解法：加
min-width: 0（或overflow: hidden本身会隐式触发 BFC，但显式写更稳） - 避免对 flex 子项同时设
width: 100%和flex: 1，这容易让计算宽度失准
单行 vs 多行省略的现实选择
text-overflow: ellipsis 原生只支持单行。想截两行或三行？别硬套 CSS，目前最可靠的是 JavaScript 方案（如 clamp() + line-clamp 的兼容性仍要小心）。
-
display: -webkit-box+-webkit-line-clamp能实现多行截断，但仅限 WebKit 内核，iOS Safari 支持好，Android WebView 版本碎片化严重 -
line-clamp在 Chrome 125+ 已支持标准语法（去掉前缀），但旧版安卓微信 X5 内核完全不认 - 服务端截断或前端用
substring()+ 字数估算仍是兜底最稳的方式，尤其对中英文混排、emoji 等复杂文本
字体差异导致省略号位置偏移或错位
同一个 max-width 下，不同字体的字符宽度、字间距、甚至省略号渲染位置都可能不同。iOS 系统字体（San Francisco）和 Android 的 Roboto/SamsungOne 渲染同一段文字，溢出点经常差 1–2 个像素。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必在真机上验证，模拟器和桌面 Chrome DevTools 的渲染结果可能不准
- 避免用
ch或em单位做截断宽度基准，优先用px或rem（配合一致的根字号） - 如果业务强依赖多端视觉一致，建议预留 2–4px 宽度余量，比如标称 120px 宽，实际设
max-width: 116px
white-space，或者某个 transform 让元素脱离了文档流，导致 overflow 失效——这种问题得一层层查 computed style。 
