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;
}
结合使用场景建议
在实际开发中，这两个属性经常需要配合使用，以达到理想的文本排版效果。
基本上就这些，合理使用 word-break 与 white-space 能有效解决多数文本溢出和格式丢失问题。
