word-break是CSS中用于控制文本换行行为的属性，主要用于处理容器内文本遇到边界时的换行规则，尤其针对长单词、连续数字或者特殊字符的场景，能够避免文本溢出容器或者出现不符合预期的换行效果。
word-break属性基本语法
word-break属性的基本语法格式如下：
/* 基本语法 */
selector {
word-break: value;
}
其中value为属性取值，常见的合法取值包括normal、break-all、keep-all，不同取值对应不同的换行逻辑。
各取值含义与效果
normal
这是word-break属性的默认值，换行规则遵循浏览器默认的文本换行逻辑。对于中文、日文、韩文等CJK文字，会在任意字符处换行；对于英文等非CJK文字，只会在空格、连字符等位置换行，长单词不会被拆分换行。
break-all
该取值允许在任意字符之间换行，不管是不是单词边界。对于长英文单词、连续数字或者URL等没有空格分隔的文本，会在到达容器边界时直接拆分换行，不会出现文本溢出的情况，但可能会破坏单词的完整性。
keep-all
该取值主要用于CJK文字，会让CJK文字不在任意字符处换行，只在半角空格、连字符等位置换行；对于非CJK文字，效果和normal一致。这个取值可以避免CJK文字被不合理拆分，保持文字的完整性。
代码示例对比
下面通过一个具体的示例展示不同取值的实际效果，容器宽度设置为200px，内部放置一段包含长英文单词的文本：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 200px;
border: 1px solid #ccc;
margin-bottom: 20px;
padding: 10px;
}
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
.keep-all {
word-break: keep-all;
}
</style>
</head>
<body>
<div class="container normal">
这是一段测试文本，包含长英文单词：internationalization，还有连续数字12345678901234567890
</div>
<div class="container break-all">
这是一段测试文本，包含长英文单词：internationalization，还有连续数字12345678901234567890
</div>
<div class="container keep-all">
这是一段测试文本，包含长英文单词：internationalization，还有连续数字12345678901234567890
</div>
</body>
</html>
运行上述代码后可以看到：normal取值下长英文单词和数字不会拆分，会溢出容器；break-all取值下长单词和数字会被拆分换行，填满容器宽度；keep-all取值下中文正常换行，长英文单词依然会溢出。
和其他换行属性的区别
很多开发者容易混淆word-break和word-wrap（现在标准名称为overflow-wrap）属性，两者的核心区别如下：
- word-break的
break-all取值会强制在任意字符处换行，即使是正常的英文单词也会被拆分。 - overflow-wrap的
break-word取值只会在单词无法完整放入容器时才会拆分换行，会尽量保持单词的完整性，只在必要时拆分。
实际开发中需要根据具体场景选择对应的属性，如果希望尽可能不拆分单词，优先使用overflow-wrap；如果希望充分利用容器宽度，允许拆分任意字符，再使用word-break。
使用注意事项
使用word-break属性时需要注意以下几点：
- 该属性对行内元素无效，需要应用在块级元素或者行内块元素上才会生效。
keep-all取值对部分小语种的文字支持可能存在差异，使用前需要确认兼容性需求。- 不要滥用
break-all取值，随意拆分英文单词会影响用户阅读体验，只在处理连续无空格字符的场景下使用。
word-breakCSS文本换行文本布局修改时间：2026-06-13 17:42:31