text-overflow: ellipsis 在移动端不显示省略号是因为未同时满足三个前提：white-space: nowrap、overflow: hidden 和容器有明确宽度限制，尤其在 flex 布局中易因 flex-shrink 导致宽度塌陷。
text-overflow: ellipsis 在移动端小屏幕下不显示省略号？不是属性写错了，是它根本没被触发——漏掉任一前提都会失效。
为什么 text-overflow: ellipsis 在小屏上突然不工作
它不是独立生效的样式，而是依赖三个强制条件同时成立：
-
white-space: nowrap缺失 → 文字自动换行，压根不会“溢出” -
overflow: hidden缺失 → 溢出内容直接露出来，没机会画省略号 - 容器没有明确宽度限制 → 比如只设
width: 100%但父容器是flex或inline，实际计算宽度可能为auto，尤其在小屏缩放后更易失准
真机测试时常见现象：Chrome DevTools 里看着好好的，iOS Safari 或安卓微信 X5 内核里省略号消失——大概率是宽度计算在 flex 布局中塌陷了。
Flex 容器里文字截断失效的解法
在 display: flex 的子项上加 text-overflow: ellipsis，90% 的失败源于 flex-shrink: 1 默认行为：它会压缩文本容器，导致 overflow 触发时机错乱。
立即学习“前端免费学习笔记（深入）”；
- 加
min-width: 0（推荐）→ 强制参与宽度计算，让overflow: hidden生效 - 或设
flex-shrink: 0→ 阻止压缩，适合宽度固定、不随父容器伸缩的场景 - 避免同时写
width: 100%和flex: 1→ 容易引发宽度解析冲突，小屏下更不稳定
示例修复写法：.title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
用伪元素做“展开”提示的坑
很多人用 ::after 在省略号后加「… 更多」，但要注意：
- 伪元素无法响应
text-overflow的裁剪逻辑，它始终显示，哪怕文本没溢出 → 必须配合 JS 判断是否真实截断（比如比对scrollWidth > clientWidth） - 伪元素内容会参与布局，若未设
position: absolute，可能撑开容器高度或影响对齐 - 在 RTL 语言（如阿拉伯语）下，
::after默认插在末尾，但视觉顺序是反的，需额外加direction: ltr或改用::before
简单判断是否截断的 JS 片段：el.scrollWidth > el.clientWidth，别依赖 offsetHeight，小屏字体渲染差异会让它不准。
小屏适配最易忽略的一点
字体不同，同一 max-width 下的溢出位置能差 2–3 像素。San Francisco（iOS）和 Roboto（Android）对中文、emoji、连字的处理完全不同。模拟器里调好了，真机一测就偏移——所以必须在目标机型上实测，且预留至少 2px 宽度余量。比如设计稿标 max-width: 120px，代码里写 118px 更稳。
