移动端标题栏text-overflow不生效需同时满足：white-space: nowrap、overflow: hidden、明确宽度约束（如min-width: 0）；flex布局下标题须加min-width: 0防收缩；长url需break-word或-webkit-line-clamp两行截断。
移动端标题栏 text-overflow 不生效的三个硬性条件
直接加 text-overflow: ellipsis 却没省略号？不是 CSS 写错了，而是漏了必须同时满足的三个前提：
-
white-space: nowrap—— 否则文字自动换行，根本不会“溢出” -
overflow: hidden—— 否则溢出内容照常显示，没机会触发省略 - 元素必须有**明确宽度约束** ——
width、max-width或受 flex 容器强约束（width: 100%在 flex 子项中不可靠）
尤其在 iOS Safari 或安卓微信 X5 内核里，缺任一条件都会静默失效，连 warning 都不报。
Flex 布局下标题截断失败的典型翻车点
绝大多数移动端标题栏用 display: flex 实现左右按钮 + 居中标题，这时标题作为 flex 子项，默认 min-width: auto，会拒绝收缩，导致 text-overflow 彻底失能。
必须显式打破这个保护机制：
- 给标题元素加
min-width: 0（推荐，语义清晰） - 或加
overflow: hidden（它会隐式触发 BFC，但不如前者直白） - 避免同时写
flex: 1和width: 100%，两者叠加会让宽度计算冲突
示例关键样式：
.header-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0; /* 这一行不能少 */
}
响应式容器中 max-width: 100% 为什么有时也不管用？
max-width: 100% 看似合理，但在 flex 或绝对定位上下文中，若父容器没有明确尺寸（比如 position: absolute 且未设 left/right），它可能退化为 max-width: none，导致截断失效。
更稳的做法：
- 父容器加
max-width: 100%+width: fit-content（防撑宽） - 标题自身用
max-width: calc(100vw - 80px)（预留左右按钮空间） - 真机测试必做：不同机型下字体渲染宽度差异会导致省略号位置偏移，尤其是含 emoji 或中英文混排时
长 URL 或无空格字符串的特殊处理
像 https://example.com/a/very/long/path 这类连续无空格字符串，white-space: nowrap 会让它直接撑破容器，text-overflow 根本不触发。
此时需切换策略：
- 优先用
overflow-wrap: break-word（现代标准）或兼容写法word-wrap: break-word - 若仍要末尾省略号，得放弃单行，改用
display: -webkit-box+-webkit-line-clamp: 2实现两行截断 - 注意：
-webkit-line-clamp在 Chrome 125+ 已支持无前缀语法，但旧版安卓微信 X5 内核完全不识别，服务端预截断仍是兜底最稳的方式
复杂点在于：同一个标题，可能既是普通中文，又偶尔含 URL 或 emoji —— 纯 CSS 很难覆盖所有边界，实际项目中往往需要 JS 动态判断字符类型再决定截断逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
