css 想让文字在移动端不换行怎么办_使用换行控制和溢出省略号保证文字显示

移动端文字强制不换行需用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 上长中文依然可能在字中间断开，省略号就失效了。