CSS文字换行之word-wrap和word-break的区别
在前端开发过程中，处理文本内容换行是经常会遇到的场景，尤其是当遇到长单词、连续数字或者特殊字符时，默认的文本换行规则可能无法满足布局需求。CSS提供了word-wrap和word-break两个属性来控制文本换行行为，很多开发者容易混淆这两个属性的作用，下面我们就来详细梳理它们的区别和使用场景。
一、默认文本换行规则
在了解这两个属性之前，我们首先要知道浏览器默认的文本换行逻辑：对于中文、日文等字符，浏览器会在任意字符处换行；对于英文单词、连续数字等，浏览器默认不会拆分单词或数字，只有当容器宽度不足以容纳整个单词或数字时，才会将其整体移到下一行，如果单词或数字的长度超过了容器的最大宽度，就会出现内容溢出容器的情况。
二、word-wrap属性
word-wrap属性（CSS3中更名为overflow-wrap，不过word-wrap的兼容性更好，目前大部分场景仍可使用）的作用是：当行内内容（比如长单词、连续数字）的宽度超过容器宽度时，是否允许在内容内部换行。
它的常用取值有两个：
- normal：默认值，只在允许的断字点换行，也就是不会拆分长单词或连续数字，内容超出容器时会溢出。
- break-word：如果行内内容超出容器宽度，会在内容内部进行换行，拆分长单词或连续数字来适配容器宽度。
下面是word-wrap的使用示例：
/* 容器基础样式 */
.text-container {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
/* word-wrap默认行为 */
.wrap-normal {
word-wrap: normal;
}
/* word-wrap允许拆分长内容 */
.wrap-break {
word-wrap: break-word;
}对应的HTML结构如下：
<div class="text-container wrap-normal"> 这是一个测试文本：superlongwordthatwillnotfitinthecontainer1234567890，观察换行效果 </div> <div class="text-container wrap-break"> 这是一个测试文本：superlongwordthatwillnotfitinthecontainer1234567890，观察换行效果 </div>
上述代码中，第一个容器的word-wrap为默认值normal，如果长单词和连续数字的长度超过容器宽度，就会溢出容器；第二个容器设置了word-wrap: break-word，长单词和连续数字会被拆分，在容器宽度内换行。
三、word-break属性
word-break属性用来指定怎样在文本中换行，它的控制粒度比word-wrap更细，不仅影响长单词和数字，还会影响CJK（中文、日文、韩文）字符的换行规则。
它的常用取值有四个：
- normal：默认值，使用浏览器默认的换行规则，CJK字符可以任意换行，非CJK文本（比如英文单词）只在允许的断字点换行。
- break-all：对于非CJK文本，会在任意字符处换行，不管是不是单词中间，都不会等到行尾才换行，也不会像
word-wrap: break-word那样优先考虑把整个单词放进容器，只要当前行放不下下一个字符就会直接换行；对于CJK字符，换行规则和normal一致。 - keep-all：CJK字符不允许在字符之间换行，也就是中文不会在任意位置换行，只会在空格或标点处换行；非CJK文本的换行规则和normal一致。
- break-word：效果和
word-wrap: break-word类似，不过它是word-break的属性值，部分旧版本浏览器可能不支持。
下面是word-break的使用示例：
/* 基础容器样式同上 */
.text-container {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
/* word-break默认行为 */
.break-normal {
word-break: normal;
}
/* 非CJK文本任意字符处换行 */
.break-all {
word-break: break-all;
}
/* CJK字符不允许字符间换行 */
.break-keep {
word-break: keep-all;
}对应的HTML结构如下：
<div class="text-container break-normal"> 测试文本：中文内容测试superlongword，观察换行效果 </div> <div class="text-container break-all"> 测试文本：中文内容测试superlongword，观察换行效果 </div> <div class="text-container break-keep"> 测试文本：中文内容测试superlongword，观察换行效果 </div>
上述代码中，break-normal容器使用默认换行规则，长英文单词会整体移到下一行；break-all容器中的英文单词会在任意字符处换行，不会等到行尾，中文仍正常换行；break-keep容器中的中文不会在字符之间换行，只有遇到空格或标点才会换行。
四、核心区别总结
| 对比维度 | word-wrap | word-break |
|---|---|---|
| 作用范围 | 主要针对行内长内容（长单词、连续数字），不会影响CJK字符的默认换行规则 | 可以影响所有文本类型，包括CJK字符和非CJK字符，控制粒度更细 |
| 换行逻辑 | 先尝试把整个内容放到当前行，放不下的时候才会在内容内部拆分换行 | break-all取值下，只要当前行放不下下一个字符，不管是不是单词中间都会直接换行，不会优先尝试放整个内容 |
| 对CJK字符的影响 | 无影响，CJK字符仍遵循默认换行规则 | 可以通过keep-all取值禁止CJK字符在字符间换行，改变默认的中文换行规则 |
五、使用场景建议
- 如果只是遇到长单词、连续数字导致内容溢出，希望这些内容可以拆分换行，同时不影响中文等其他文本的换行规则，优先使用
word-wrap: break-word。 - 如果需要严格控制在任意字符处换行，比如展示连续的无意义字符、代码字符串等场景，可以使用
word-break: break-all。 - 如果需要禁止中文在字符之间换行，只在标点或空格处换行，可以使用
word-break: keep-all。
实际开发中可以根据具体的布局需求选择合适的属性，如果需要兼容旧版本浏览器，建议优先使用word-wrap的相关取值，因为它的兼容性覆盖更广。