你是否曾为页面上一个超长的英文单词、一串无空格的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：合并空白，但保留换行符，正常换行。
不同场景下的使用方案
中英文混合换行
.text {
word-break: break-all; /* 强制所有字符间换行 */
overflow-wrap: anywhere; /* 更智能的单词中断 */
}
保留单词完整性
.text {
word-wrap: break-word; /* 优先单词整体换行 */
overflow-wrap: break-word;
}
处理长数字串/无空格文本
.numbers {
word-break: break-all; /* 强制数字串内换行 */
}
扩展说明
默认换行规则
结语
同学如果你在实践中遇到了不懂的或其他坑，可发在评论区，我会定期解答并更新在文章中。
欢迎各位同学的指点与交流~
