移动端text-overflow: ellipsis失效主因是flex/grid布局、内联元素、无宽度约束三类场景破坏其前提；需显式设min-width:0、块级显示及overflow:hidden，多行省略依赖-webkit-line-clamp且兼容性受限。
移动端超长文本省略号失效，基本不是 text-overflow: ellipsis 本身坏了，而是它依赖的三个前提在移动环境里被悄悄破坏了——尤其是 Flex/Grid 布局、内联元素、无宽度约束这三类场景，90% 的“没反应”都卡在这儿。
为什么 white-space: nowrap 在 Flex 容器里不生效？
Flex 子项默认有 min-width: auto，它会阻止元素收缩到内容宽度以下，哪怕你写了 white-space: nowrap 和 width: 0，浏览器也优先按“不压缩文字”来算尺寸，导致根本没机会触发溢出。
- 必须显式加
min-w-0（Tailwind）或min-width: 0（原生 CSS） - 如果用了
flex-1，min-w-0要加在同一元素上，不能只加在父级 - 在 iOS Safari 中，仅加
min-w-0不够，还得确保父容器没设align-items: stretch（会强化子项高度拉伸，干扰行高计算）
text-overflow: ellipsis 在 span 上完全没反应？
span 是 inline 元素，而 overflow 属性对 inline 元素无效——这是规范行为，不是 bug。直接加 truncate 类也不会起作用，因为 Tailwind 的 truncate 也不改 display 类型。
- 方案一：给
span加inline-block或block（原生）；Tailwind 对应用inline-block或block - 方案二：用
div替代span，更可控 - 千万别只加
white-space: nowrap就以为够了——没overflow: hidden+ 块级显示，text-overflow根本不会渲染省略号
多行省略在安卓 WebView 或旧版 iOS 上显示整段不截断？
-webkit-line-clamp 是 WebKit 专属属性，在非 WebKit 内核（如某些安卓系统 WebView、UC 浏览器）或老 iOS 版本（overflow: hidden，但又没设高度，结果就是文字堆成一团或撑开容器。
- 必须配
max-height或height（比如max-h-12），否则浏览器无法判断“几行算溢出” -
display: -webkit-box会被 Flex/Grid 父容器覆盖，得确保该元素没被父级 layout 强制重写 display - 真要兼容非 WebKit 环境，得 fallback 到 JS 方案（如计算行高 × 行数后截断字符串），纯 CSS 无解
最常被忽略的一点：移动端字体渲染差异会让同一段文字在不同设备上换行点不同，导致“在 iPhone 上好好的，在华为某机型上就溢出”。所以别只测一个设备，max-width 比 width 更稳妥，配合 box-sizing: border-box 防止 padding 暴雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
