🔥 告别溢出！一文吃透 CSS 文字换行控制技巧 (overflow-wrap/word-break/word-wrap...)

你是否曾为页面上一个超长的英文单词、一串无空格的URL、或者一段包含特殊符号的文本撑破了精心设计的布局而抓狂？😩 文字溢出容器、破坏美感甚至影响功能，这是前端开发中常见的"拦路虎"。别担心！掌握 CSS 提供的文字换行控制属性，就是驯服这头"猛虎"的关键。本文将系统梳理 word-break, overflow-wrap (原 word-wrap), white-space等属性的工作原理、区别和适用场景，并通过实例演示如何灵活运用它们解决各种文字换行难题，让你的文本在任何容器中都优雅呈现。

理论讲解

word-wrap (overflow-wrap)

这个属性用于允许长单词或URL地址换行到下一行。它有两个值：

normal：只在允许的断字点换行（例如空格）。
break-word：在长单词或URL内部进行换行。

注意：overflow-wrap 是标准属性，word-wrap 是其别名，通常可以互换使用。

word-break

这个属性指定了怎样在单词内换行。常用值：

normal：使用默认的换行规则。
break-all：对于非CJK（中文/日文/韩文）文本，可在任意字符间断行。
keep-all：CJK文本不断行，非CJK文本行为同normal。

white-space

这个属性用于控制如何处理元素内的空白。常用值：

normal：合并空白，换行符当作空白，根据需要自动换行。
nowrap：合并空白，但不换行，直到遇到<br>标签。
pre：保留空白，像<pre>标签一样，只在换行符和<br>处换行。
pre-wrap：保留空白，但正常换行。
pre-line：合并空白，但保留换行符，正常换行。

不同场景下的使用方案

中英文混合换行

markdown 复制代码

.text {
  word-break: break-all; /* 强制所有字符间换行 */
  overflow-wrap: anywhere; /* 更智能的单词中断 */
}

overflow-wrap: anywhere;

保留单词完整性

markdown 复制代码

.text {
  word-wrap: break-word; /* 优先单词整体换行 */
  overflow-wrap: break-word;
}

处理长数字串/无空格文本

markdown 复制代码

.numbers {
  word-break: break-all; /* 强制数字串内换行 */
}

扩展说明

默认换行规则

结语

同学如果你在实践中遇到了不懂的或其他坑，可发在评论区，我会定期解答并更新在文章中。

欢迎各位同学的指点与交流~