在前端页面开发过程中，文本内容过长时很容易出现超出容器边界、排版错乱的情况，合理使用CSS属性可以控制文本的换行规则，让页面布局更规整。常见的CSS文本换行控制属性有white-space、word-wrap、word-break，不同属性的取值对应不同的换行逻辑，适配不同的业务场景。
常用CSS文本换行属性介绍
1. white-space属性
white-space属性用来设置如何处理元素内的空白字符和换行规则，常用取值如下：
- normal：默认值，连续的空白符会被合并，换行符会被当作空白符处理，文本会在边界处自动换行。
- nowrap：强制文本在一行内显示，不会换行，直到遇到<br>标签为止。
- pre：保留文本中的空白符和换行符，文本不会自动换行。
- pre-wrap：保留空白符和换行符，同时文本会在边界处自动换行。
- pre-line：合并连续的空白符，保留换行符，文本会在边界处自动换行。
2. word-wrap属性
word-wrap也叫overflow-wrap，用来设置当长单词或URL地址超出容器宽度时是否允许在单词内换行，常用取值如下：
- normal：默认值，只在允许的断字点换行，长单词不会在内部换行。
- break-word：允许长单词或URL地址在内部换行，避免内容溢出容器。
3. word-break属性
word-break属性用来设置文本换行时的断行规则，常用取值如下：
- normal：默认值，使用浏览器默认的换行规则。
- break-all：允许在任意字符间换行，包括英文单词中间，适合中文、日文、韩文等文本。
- keep-all：不允许在中文、日文、韩文的字符间换行，只能在半角空格或连字符处换行。
属性组合使用示例
下面通过几个常见场景的代码示例，演示不同属性的组合效果：
场景一：普通文本自动换行
普通中文英文混合文本，希望文本在容器边界自动换行，不需要保留多余空白，代码如下：
.text-normal {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
white-space: normal;
word-wrap: normal;
word-break: normal;
}
场景二：强制文本不换行，超出显示省略号
单行文本不换行，超出容器部分显示省略号，常用于标题、导航栏文本，代码如下：
.text-nowrap {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
场景三：长URL或英文单词自动换行
文本中包含长URL或者连续的英文字符，需要允许在单词内部换行，避免溢出容器，代码如下：
.text-break {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
word-wrap: break-word;
word-break: break-all;
}
不同属性效果对比
下表展示了不同属性组合下的文本换行表现：
| 属性组合 | 换行表现 |
|---|---|
| white-space: normal; word-wrap: normal; word-break: normal | 中文自动换行，英文单词只在空格处换行，长单词溢出 |
| white-space: nowrap; 其他默认 | 所有文本强制一行显示，不换行 |
| word-wrap: break-word; word-break: break-all | 任意字符处都可换行，长单词、URL会被拆分换行 |
| white-space: pre-wrap; 其他默认 | 保留输入时的空白和换行，同时边界处自动换行 |
注意事项
使用文本换行属性时需要注意，word-break: break-all会强制拆分英文单词，可能影响英文阅读体验，如果是主要展示英文内容的场景，优先使用word-wrap: break-word。另外，当设置white-space: nowrap时，需要配合overflow和text-overflow属性才能实现超出显示省略号的效果，单独设置nowrap只会让文本溢出容器。
CSS文本换行word_wrapword_breakwhite_space修改时间：2026-06-27 22:48:36