CSS中的overflow-wrap属性用于控制文本在容器内的换行行为，当文本内容长度超过容器宽度时，该属性可以决定文本是否需要换行、如何换行，避免出现文本溢出容器的情况，是前端文本排版中常用的属性之一。
overflow-wrap属性基本定义
overflow-wrap是CSS3规范中定义的文本换行属性，主要作用是设置当行内内容（比如长单词、长URL）无法在容器内完整显示时，是否允许在任意位置换行。该属性最初在CSS2.1规范中以word-wrap的名称出现，后来在CSS3中被重命名为overflow-wrap，为了兼容性，目前大部分浏览器仍然同时支持word-wrap和overflow-wrap，两者的取值和效果完全一致。
overflow-wrap属性常用取值
overflow-wrap属性主要有以下几个常用取值：
- normal：默认值，只在允许的换行点换行，比如单词之间的空格、连字符位置，长单词不会在中间断开换行。
- break-word：如果行内内容无法在容器内完整显示，允许在任意字符处断开换行，避免内容溢出容器。
- anywhere：和break-word类似，允许在任意位置换行，但计算最小内容尺寸时，会把换行机会考虑进去，不过该取值的浏览器兼容性稍差。
overflow-wrap属性使用示例
下面通过具体代码演示overflow-wrap不同取值的效果差异，首先创建基础的HTML结构：
<div class="container"> <p class="text-normal">这是一个很长很长的单词：abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p> <p class="text-break">这是一个很长很长的单词：abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p> </div>
对应的CSS样式代码如下：
.container {
width: 200px; /* 限制容器宽度，方便观察换行效果 */
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.text-normal {
overflow-wrap: normal; /* 默认值，长单词不换行 */
}
.text-break {
overflow-wrap: break-word; /* 长单词允许断开换行 */
}
运行上述代码后，第一个段落的长单词会超出容器宽度，第二个段落的长单词会在容器边缘断开，换行显示在下一行，不会出现溢出的情况。
overflow-wrap和其他换行属性的区别
很多开发者容易混淆overflow-wrap、word-break和white-space这几个属性，下面通过对比明确各自的作用：
| 属性名 | 核心作用 | 适用场景 |
|---|---|---|
| overflow-wrap | 控制长内容是否允许断开换行 | 处理长单词、长URL等溢出问题 |
| word-break | 控制单词的换行规则 | 处理CJK文字和非CJK文字的混合换行 |
| white-space | 控制空白字符的处理和换行方式 | 控制文本是否保留空格、是否自动换行 |
使用注意事项
在使用overflow-wrap属性时需要注意以下几点：
- 如果同时设置了
white-space: nowrap，overflow-wrap的break-word取值会失效，因为nowrap会强制文本不换行。 - 在旧版本浏览器中，如果需要兼容，可以同时写
word-wrap: break-word和overflow-wrap: break-word，确保兼容性。 - overflow-wrap只影响行内元素的换行行为，对块级元素的整体布局没有直接影响。
总结：overflow-wrap是处理文本溢出的核心属性，日常开发中遇到长文本溢出容器的问题，优先尝试设置overflow-wrap为break-word，即可快速解决问题。
overflow-wrapword-wrapword_breakCSS文本换行修改时间：2026-07-09 17:39:34