word-break和white-space是控制文本换行的关键CSS属性。word-break用于设置单词内断行方式，如break-all允许任意字符间断行以防止溢出；white-space决定空白符处理与换行行为，如pre-wrap可保留空格和换行并自动换行。两者常结合使用：用户评论推荐pre-wrap配break-word，代码展示用pre或pre-line配合keep-all防误拆。合理搭配可有效解决文本溢出与格式丢失问题。
在网页开发中，处理文本换行是常见的需求，尤其是当内容长度不可控时。CSS 提供了多个属性来控制文本的换行行为，其中 word-break 和 white-space 是两个关键属性。它们各自有不同的用途和适用场景。
word-break：控制单词内的断行方式
该属性主要用于决定是否允许在单词内部进行换行，特别适用于中文、日文等没有空格分隔的语言，或
防止英文长单词溢出容器。
- normal：使用默认的换行规则，不允许在单词内断行（适合英文为主的内容）
- break-all：允许在任意字符间断行，即使是在单词中间（常用于表格或窄容器中防止溢出）
- keep-all：不拆分单词，通常用于 CJK（中文、日文、韩文）文本，保持词组完整
例如，在一个固定宽度的表格单元格中显示长 URL，可以这样设置：
css
td {
word-break: break-all;
}
white-space：控制空白符的处理与换行
这个属性决定了空白符（空格、换行、制表符）如何被浏览器解析和显示，也影响文本是否自动换行。
常用取值：- normal：合并空白符，自动换行，这是默认行为
- nowrap：合并空白符，但不换行，文本会在一行中持续延伸
- pre：保留所有空白符，换行符生效，类似 pre 标签的效果
- pre-wrap：保留空白符，允许自动换行
- pre-line：合并多余空格，但保留换行符并换行显示
比如希望用户输入的文本保留换行和空格，可使用：
css
div {
white-space: pre-wrap;
}
结合使用场景建议
在实际开发中，这两个属性经常需要配合使用，以达到理想的文本排版效果。
- 对于用户评论或日志类内容，推荐 white-space: pre-wrap 配合 word-break: break-word（注意：break-word 是非标准但广泛支持的值，等效于 overflow-wrap: break-word）
- 在响应式布局中，避免英文长单词撑开容器，使用 word-break: break-word 或 overflow-wrap: break-word
- 显示代码片段时，用 white-space: pre 或 pre-line 保留格式，同时设置 word-break: keep-all 防止中文或变量名被错误拆分
