根本原因是容器在响应式环境下失去有效宽度约束或触发浏览器特殊渲染逻辑：white-space: nowrap在ios safari等环境中常被忽略，flex子项需min-width: 0才能收缩，overflow: hidden必须与text-overflow: ellipsis、white-space: nowrap及明确宽度共存于同一元素，且需触发bfc。
移动端单行文本溢出显示不全或省略号不出现，根本原因不是“CSS写错了”，而是容器在响应式环境下失去了有效宽度约束或触发了浏览器的特殊渲染逻辑。
为什么 white-space: nowrap 在移动端经常失效
在 iOS Safari 或部分 Android Webview 中，white-space: nowrap 单独存在时可能被忽略，尤其当父容器使用 flex、grid 或未设置明确宽度时。系统会优先按内容撑开，导致 overflow: hidden 失效——因为根本没“溢出”，只是容器被拉宽了。
- Flex 项目默认
min-width: auto，会阻止收缩，必须显式设为min-width: 0 - 百分比宽度（如
width: 100%）若父级无宽，等于无效；推荐用max-width: 100%+box-sizing: border-box - iOS 旧版 Webview 对
text-overflow: ellipsis要求严格：必须是块级元素，且不能有float或position: absolute干扰流式布局
text-overflow: ellipsis 不显示省略号的典型场景
即使写了三件套，省略号仍不出现，大概率卡在这几个点：
- 容器没有触发 BFC（Block Formatting Context），比如在
display: flex的子项里直接写white-space: nowrap，但没加overflow: hidden——注意：overflow必须写在**同一元素**上，不能只写在父级 - 字体加载延迟导致首次渲染时宽度计算错误，可加
font-display: swap或用line-height稳定基线 - 使用了
rem/vw单位但未做 viewport 适配，例如漏掉<meta name="viewport" content="width=device-width, initial-scale=1"> - 某些安卓 WebView（如 UC 内核）对
-webkit-text-overflow: ellipsis更敏感，建议补全前缀
移动端安全可用的单行省略写法
以下组合已在 iOS 15+、Android Chrome 120+、微信 Webview 8.0+ 实测稳定：
.mobile-ellipsis {
width: 0;
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
}
关键点解释：
-
width: 0+min-width: 0是 flex 场景下最可靠的收缩起点，比单纯flex-shrink: 1更直接 -
max-width: 100%兼容各种嵌套，不依赖父级width值 - 无需额外加
display: block，现代浏览器中内联元素（如span）设了max-width后也能生效
真正容易被忽略的是：移动端文本溢出问题，90% 不出在 CSS 属性本身，而出现在容器的尺寸继承链和渲染上下文是否干净。别急着改 text-overflow，先检查 computed style 里的 width 和 overflow 是否真被应用了——很多时候，它只是悄悄被 flex 或 zoom 覆盖掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
