小屏上text-overflow: ellipsis不生效是因四前提易被破坏：需显式设display为block/inline-block、max-width/width、white-space: nowrap、overflow: hidden；flex中还需min-width: 0。
为什么小屏上 text-overflow: ellipsis 常常不生效
不是属性失效，而是四个前提在小屏下更容易被破坏：默认 width 计算失准、flex 子项被压缩、inline 元素未显式设 display、white-space: nowrap 与响应式布局冲突。尤其当父容器用 vw 或 % 宽度时，子元素若没加 min-width: 0，WebKit 会优先保内容不溢出而非触发省略。
移动端单行省略必须写的四条CSS规则
缺一不可，顺序无关，但漏任一都会静默失败：
-
display: block或display: inline-block（不能是inline或flex） -
width或max-width必须显式设置——推荐max-width: 85vw或width: 100%+ 父级max-width -
white-space: nowrap（禁止换行是“溢出”发生的前提） -
overflow: hidden（text-overflow的生效开关）
示例（适配小屏卡片标题）：
.card-title { display: block; max-width: 90vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
Flex 布局里 text-overflow 失效的典型修复
小屏常见结构是 display: flex 卡片内含文本+图标，此时文本容器即使写了上述四条，仍不显示省略号——根本原因是 flex 默认 flex-shrink: 1，浏览器先压缩宽度再判断是否溢出，导致省略逻辑被跳过。
- 加
min-width: 0（最通用，兼容所有现代浏览器） - 或改用
flex: 0 1 auto+max-width: 100%（避免和flex: 1冲突） - 禁用
width: 100%和flex: 1同时存在，否则小屏下宽度计算可能为 0
错误写法：
.title { flex: 1; width: 100%; text-overflow: ellipsis; /* 不生效 */ } 正确写法：.title { flex: 0 1 auto; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
多行省略在小屏上要不要用 -webkit-line-clamp
可以，但得接受两个现实：Firefox 125+ 才原生支持，且小屏上行高、字体渲染差异会让截断位置偏移。如果必须两行以上省略，建议：
- 只用于静态文案（如商品描述摘要），避免在用户可编辑输入框中使用
- 配合固定
line-height（如1.4）和font-size（用rem）减少偏差 - 真机测试必做——iOS Safari 对
-webkit-line-clamp的高度计算比 Chrome 更保守，同样设置下可能少显示半行
不要指望 title 属性补救：小屏无 hover，屏幕阅读器读不出 title，还可能和 touch 事件冲突。
小屏适配最易忽略的点是：把「写了 text-overflow: ellipsis」当成终点，其实只是起点；真正起作用的是那四条配套规则在不同布局上下文中的稳定组合，尤其是 min-width: 0 在 flex 场景下的强制介入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
