移动端文字强制不换行需用white-space: nowrap、word-break: keep-all和overflow: hidden组合；单行省略还需width、overflow: hidden与text-overflow: ellipsis三者缺一不可，且元素需为block或inline-block。
移动端文字强制不换行的 CSS 写法
默认情况下，white-space: normal 会让中文、英文单词在容器宽度不足时自动换行。要让文字在移动端「坚决不换行」，核心是改写 white-space 并配合 overflow 控制视觉表现。
white-space: nowrap 是关键，但要注意中英文差异
只加 white-space: nowrap 能阻止换行，但中文没有天然空格分隔，浏览器仍可能在任意字间断行（尤其 iOS Safari）。英文单词则因连字符或软连字符（）也可能意外折行。所以必须组合使用：
-
white-space: nowrap：禁用所有换行行为 -
word-break: keep-all：对中文/日文/韩文禁止字内断行（iOS Safari 尤其需要） -
overflow: hidden：防止内容撑破容器或横向滚动（视设计需求可选）
加省略号需要三件套：width + overflow + text-overflow
仅靠 white-space: nowrap 不会自动显示 …。要实现「单行截断+省略号」，三个属性缺一不可：
- 容器必须有明确宽度（
width、max-width或弹性布局约束） -
overflow: hidden：隐藏溢出内容 -
text-overflow: ellipsis：触发省略号渲染
注意：text-overflow: ellipsis 对 display: inline 元素无效，需确保元素是 block 或 inline-block。
立即学习“前端免费学习笔记（深入）”；
完整可用的移动端单行省略样式
以下代码在 iOS 和 Android 主流浏览器中均稳定生效：
div.text-clip {
width: 100%;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
}
如果容器是 Flex 子项，还需防止单词拉伸导致宽度失控，建议加 flex-shrink: 0；若父容器用了 display: table-cell，则需额外加 table-layout: fixed 才能触发 text-overflow。
最常被忽略的是 word-break: keep-all —— 没它，iOS 上长中文依然可能在字中间断开，省略号就失效了。
