在网页排版中，当容器宽度有限而内容包含超长英文单词、连续数字或URL时，浏览器默认的换行算法通常不会主动折断这些字符串，结果就是文本溢出或者撑破父元素。CSS为此给出了一系列控制断行的属性，理解它们的作用边界才能写出稳妥的样式。
一、word-break属性详解
word-break用来决定文本在什么位置可以换行。它最常用的值有normal、break-all和keep-all。默认值是normal，此时浏览器按照语言自身的规则断行，英文只在空格或连字符处断，中文可以字字断。
当设置为break-all时，浏览器可以在任意字符之间折断单词，哪怕是一个完整的英文单词也会被拦腰截断。这种方式能最大限度利用容器宽度，但会严重损害英文阅读体验。下面的代码演示了两种状态的差异：
.container {
width: 120px;
border: 1px solid #ccc;
/* 普通断行 */
word-break: normal;
}
.break-all {
word-break: break-all;
}
对应的HTML结构里，如果放入一个长度为20的连续英文字母，normal会导致溢出，而break-all会将其分散到多行。需要注意的是，keep-all主要用于中日韩文字，它禁止字间断开，只在空白符处换行，对英文无意义。
二、word-wrap与overflow-wrap对比
word-wrap是非标准名称，标准属性叫overflow-wrap，但多数浏览器仍识别word-wrap。它的值break-word表示：如果一行中没有其他可断点，才允许在长单词内部断行。这和break-all截然不同，后者是无条件断。
从实践看，overflow-wrap: break-word更温和，平时英文仍按词断，仅在极端长度时才折断，适合展示用户生成内容。示例代码如下：
.wrap {
width: 150px;
word-wrap: break-word; /* 等同于 overflow-wrap: break-word */
}
把超长URL放进这个容器，它会完整显示到行尾再折断，而不会像break-all那样第一个字符后就断。因此在论坛、评论区等场景，优先使用overflow-wrap能兼顾美观与防溢出。
三、white-space的辅助作用
white-space控制空白符与换行符的处理方式。默认normal会合并空格并自动换行；nowrap禁止换行；pre保留格式但不自动折；pre-wrap既保留空白又允许自动换行；pre-line合并空格但保留换行。
如果希望保留代码缩进且能断行，可用pre-wrap配合overflow-wrap。示例如下：
.code-block {
white-space: pre-wrap;
overflow-wrap: break-word;
}
这样即使代码行很长，也不会撑破容器，同时缩进空格被保留。但注意pre-wrap不会主动折断单词，必须搭配overflow-wrap处理长串。
四、方法对比与选型建议
为了直观比较，我们用表格列出核心差异：
| 属性组合 | 断行时机 | 英文阅读 | 适用场景 |
|---|---|---|---|
| word-break: break-all | 任意字符 | 差 | 窄列、纯数字 |
| overflow-wrap: break-word | 仅溢出时 | 较好 | 评论、URL |
| white-space: pre-wrap + overflow-wrap | 保留空白并溢出断 | 较好 | 代码展示 |
综合来看，中文界面一般不需要特殊处理，浏览器默认即可。处理混合内容时，推荐overflow-wrap: break-word作为基础防御，仅在数据表格等空间极度受限处使用break-all。避免全局设置break-all，否则整站英文将难以阅读。
五、常见误区提醒
不少开发者以为加了word-break: break-all就能解决所有溢出，结果中文也被拆得支离破碎。实际上中文默认就能字间断，强行break-all反而让标点落在行首。还有人混淆word-wrap与word-break，在不需要无条件断行时误用后者。
另一个坑是忘记pre不会自动换行，直接把日志塞进pre导致横向滚动。正确做法是用pre-wrap。理清这些概念，才能用最少代码实现稳健排版。
CSS强制断行word-breakword-wrap修改时间：2026-08-08 00:36:26