text-overflow: ellipsis 在移动端生效需同时满足块级渲染、明确宽度、禁止换行、隐藏溢出四条件；缺一即失效，常见问题多源于 display 未设置或 flex 布局中缺少 min-width: 0。
text-overflow: ellipsis 在移动端能用，但必须满足四个硬性条件，缺一不可：块级渲染、明确宽度、禁止换行、隐藏溢出。很多开发者写了却没效果，问题基本出在这四点上。
移动端单行省略必须加 display: block 或 display: inline-block
移动端默认很多标签是 inline（比如 span、a），直接写 text-overflow: ellipsis 会被浏览器静默忽略。
- 不要只写
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;—— 缺display就无效 - 推荐用
display: block（适合标题、段落等独立容器）或display: inline-block（适合嵌套在行内流里的文本） - Flex 布局中子项还要额外加
min-width: 0，否则text-overflow可能被 flex 的最小尺寸策略压制
width 和 max-width 必须基于视口单位或弹性约束
移动端屏幕宽度多变，固定像素值（如 width: 200px）在小屏上可能过宽，在大屏上又浪费空间。
- 优先用
width: 100%+ 父容器设max-width，或直接用max-width: 80vw这类响应式写法 - 在
flex容器里，别只依赖flex: 1，要配合min-width: 0和显式width或max-width - 避免用
em或rem作唯一宽度依据——字体缩放时可能导致省略失效
iOS Safari 和 Android Chrome 对 -webkit-line-clamp 的支持差异
想实现多行省略？-webkit-line-clamp 在 iOS 15+ 和 Android Chrome 90+ 基本可用，但有三个关键限制：
- 必须用
display: -webkit-box，不能混用display: flex或display: grid -
-webkit-line-clamp后面的数字是“最多显示几行”，不是“截断到第几行”——内容不足时不会补空行 - 部分安卓低端机型（如旧版 Samsung Internet）会忽略
-webkit-box-orient: vertical，导致整段文字堆成一行再截断
IE 和老版 UC 浏览器需要触发 hasLayout
虽然现在移动端基本不跑 IE，但部分国内定制安卓系统仍内置老版 UC 内核（类似 IE8 渲染逻辑），text-overflow: ellipsis 可能不生效。
- 加
zoom: 1是最轻量的 hasLayout 触发方式，不影响布局 - 也可以用
overflow: hidden配合position: relative，但不如zoom: 1兼容性强 - 注意：
zoom是非标准属性，仅用于兼容，现代浏览器无需它
真正容易被忽略的点是：移动端字体渲染引擎对 line-height 和字重敏感，哪怕 CSS 完全正确，某些 Bold 字体在小字号下也会让 -webkit-line-clamp 计算行高失准——这时得靠 JS fallback 或服务端截断兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
