掌握white-space、word-wrap和word-break属性可解决文本溢出问题：white-space控制空白符和换行，常用normal、nowrap和pre-wrap；word-wrap（overflow-wrap）用于长单词断行，break-word防止溢出；word-break定义字符间断行规则，break-all适用于表格防溢出；结合使用可实现单行省略、多行安全换行及中英文混合布局，提升页面美观性与健壮性。
在网页开发中，文本的换行与溢出处理是常见需求。当内容过长时，若不加以控制，容易破坏布局或影响可读性。CSS 提供了多个属性来精细化控制文字的换行行为，主要包括 white-space、word-wrap（overflow-wrap）和 word-break。合理使用这些属性，可以有效解决文本溢出问题。
white-space：控制空白符与换行
white-space 决定如何处理元素内的空格、制表符和换行符，同时影响是否自动换行。
常用取值：- normal：合并空白符，自动换行（默认行为）
- nowrap：合并空白符，不换行，文本会在一行内持续延伸
- pre：保留空白符和换行，不自动换行（类似 pre 标签）
- pre-wrap：保留空白符和换行，允许自动换行
- pre-line：合并多余空白符，保留换行符并允许换行
例如，防止文本换行可设置：white-space: nowrap;
若需保留用户输入的回车和空格，推荐使用 pre-wrap。
word-wrap / overflow-wrap：控制长单词换行
word-wrap 是 overflow-wrap 的别名，用于控制是否在长单词或 URL 内部进行断行。
关键取值：- normal：只在允许的断点处换行（如空格、连字符）
- break-word：允许长单词在任意字符处断开以防止溢出
典型应用场景：用户输入的超长英文或链接超出容器。
示例代码：word-wrap: break-word;
或更标准写法：overflow-wrap: break-word;
word-break：定义单词内断行规则
word-break 更激进地控制文本换行方式，尤其适用于中文、日文等无空格分隔的语言。
立即学习“前端免费学习笔记（深入）”；
常用值：- normal：按默认语言规则换行
- break-all：允许在任意字符间断行，常用于表格中防溢出
- keep-all：不允许在字符间断开，中文/日文不断词，适合标题类文本
比如在固定宽度表格单元格中，使用：word-break: break-all;
可避免内容撑破布局。
综合应用建议
实际开发中，常结合多个属性实现理想效果。
- 单行溢出省略：
white-space: nowrap;<br>overflow: hidden;<br>text-overflow: ellipsis;
- 多行文本安全换行：
word-wrap: break-word;<br>word-break: break-word;
- 中英文混合内容推荐：
word-wrap: break-word;<br>word-break: normal;
基本上就这些。掌握 white-space、word-wrap 和 word-break 的差异与搭配，能有效应对大多数文本布局问题，让页面更健壮美观。
