移动端文字不换行，CSS控制技巧

本文详解了移动端文字强制不换行及单行省略显示省略号（…）的可靠CSS实现方案，重点揭示了仅用white-space: nowrap并不足以应对iOS Safari对中文的字内断行问题，必须协同word-break: keep-all、overflow: hidden，并严格满足width/overflow: hidden/text-overflow: ellipsis三要素及display为block或inline-block的前提条件；文末还提供了经过多端验证的完整代码示例与常见布局陷阱（如Flex、table-cell）的避坑指南，助你一次写对、处处生效。

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。