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; }
多行截断不能硬套 text-overflow: ellipsis
text-overflow: ellipsis 原生只支持单行。想截两行或三行？目前最可靠的是 JavaScript 方案，或者用 WebKit 专属组合：
-
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden - 必须配
max-height（比如max-height: 48px），否则部分 Android 低版本仍可能溢出 - 别指望
line-height × 行数精确算高——字体渲染差异会让实际行高浮动，建议用固定像素微调 - Chrome 125+ 已支持无前缀
line-clamp，但旧版安卓微信 X5 内核完全不认
伪元素加「… 更多」容易踩的坑
很多人用 ::after 在省略号后加「… 更多」，但要注意：
- 伪元素无法响应裁剪逻辑，它始终显示，哪怕文本没溢出 → 必须配合 JS 判断是否真实截断（比如
el.scrollWidth > el.clientWidth） - 可能撑开容器高度或影响对齐
- 在 RTL 语言（如阿拉伯语）下，
::after默认插在末尾，但视觉顺序是反的，需额外加direction: ltr或改用::before
事情说清了就结束。最麻烦的永远不是写那三行 CSS，而是真机上测——不同系统字体、内核版本、缩放设置，会让同一段 CSS 渲染出完全不同的截断位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
