white-space、word-break、overflow-wrap（原名word-wrap）的区别

一、引言

在网页开发中，文本内容的显示控制是前端工程师经常需要处理的问题。CSS 提供了三个专门用于控制文本换行和空白显示的属性：white-space、word-break、overflow-wrap（原名word-wrap）。这三个属性看似相似，实则各有侧重，本文将解析它们的区别与适用场景。

二、white-space 属性详解

1. 定义与作用

控制元素内空白符（空格、制表符、换行符）的处理方式
控制文本自动换行的行为
控制行尾空格的处理方式

2. 常用值及效果

`normal`（默认值）

空白处理：合并连续的空白字符（空格、制表符、换行符）为单个空格
换行行为 ：在容器边界或遇到<br>时换行
行尾空格：删除行尾空格
示例：

html 复制代码

<div style="white-space: normal;">
  这是一段长文本长文本长文本长文本长文本长文本
  开头空格  
  多个  空格    和


  多个回车


  结尾空格  
</div>

显示效果：

`nowrap`

空白处理：合并连续的空白字符（空格、制表符、换行符）为单个空格
换行行为 ：禁止自动换行，除非遇到<br>
行尾空格：删除行尾空格
示例：

html 复制代码

<div style="white-space: nowrap;">
  这是一段长文本长文本长文本长文本长文本长文本
  开头空格  
  多个  空格    和


  多个回车


  结尾空格  
</div>

显示效果：

`pre`

空白处理：保留所有空白字符（空格、制表符、换行符）
换行行为 ：只在源原本换行处或<br>处换行
行尾空格：保留行尾空格
示例：

html 复制代码

<div style="white-space: pre;">
  这是一段长文本长文本长文本长文本长文本长文本
  开头空格  
  多个  空格    和


  多个回车


  结尾空格  
</div>

显示效果：

`pre-line`

空白处理：合并连续的空白字符（空格、制表符、换行符）为单个空格
换行行为：保留源原本换行，同时允许自动换行
行尾空格：删除行尾空格
示例：

html 复制代码

<div style="white-space: pre-line;">
  这是一段长文本长文本长文本长文本长文本长文本
  开头空格  
  多个  空格    和


  多个回车


  结尾空格  
</div>

显示效果：

`pre-wrap`

空白处理：保留所有空白字符（空格、制表符、换行符）
换行行为：保留源原本换行，同时允许自动换行
行尾空格：保留行尾空格
示例：

html 复制代码

<div style="white-space: pre-wrap;">
  这是一段长文本长文本长文本长文本长文本长文本
  开头空格  
  多个  空格    和


  多个回车


  结尾空格  
</div>

显示效果：

`break-spaces`（CSS3新增）

空白处理：保留所有空白字符（空格、制表符、换行符）
换行行为 ：保留源原本换行，同时允许自动换行，连续空格可触发换行（与pre-wrap的区别）
行尾空格 ：保留行尾空格，且可换行（与pre-wrap的区别）
示例：

html 复制代码

<div style="white-space: break-spaces;">
  这是一段长文本长文本长文本长文本长文本长文本
  开头空格  
  多个  空格    和


  多个回车


  结尾空格                              
</div>

显示效果：

其他值说明

initial：设置为默认值（normal）
inherit：继承父元素值

3. 对比表格

值	空白处理	换行行为	行尾空格
normal	合并连续空白为单个空格	在`<br>`处换行在容器边界自动换行	删除
nowrap	合并连续空白为单个空格	在`<br>`处换行禁止自动换行	删除
pre	保留所有空白字符	在`<br>`处换行在源代码换行处换行禁止自动换行	保留
pre-line	合并连续空白为单个空格	在`<br>`处换行在源代码换行处换行在容器边界自动换行	删除
pre-wrap	保留所有空白字符	在`<br>`处换行在源代码换行处换行在容器边界自动换行	保留
break-spaces	保留所有空白字符	在`<br>`处换行在源代码换行处换行在容器边界自动换行连续空格可触发换行	保留且可作为换行点

三、word-break 属性详解

1. 定义与作用

控制文本内容在容器边界处的断行规则
专门控制单词或CJK（中日韩）文本的断行方式
与white-space不同：white-space控制空白符处理，word-break控制字符断行

2. 常用值及效果

`normal`（默认值）

断行行为 ：
- CJK（中日韩）文本：可以在任意字符间断行
- 非CJK（中日韩）文本：
  - 默认在单词间空格/连字符处换行
  - 如果单词过长且无空格，行为取决于overflow-wrap设置
示例：

html 复制代码

<div style="word-break: normal;">
    ThisIsAnExtremelyLongEnglishWordWithoutAnySpace
    这是中文EnglishMixed文本的例子Example
</div>

显示效果：

英文部分会溢出容器（不换行）
中文会在任意字符间自动换行

`break-all`

断行行为 ：
- 所有文本都可在任意字符间断行
- 不考虑单词完整性
示例：

html 复制代码

<div style="word-break: break-all;">
    ThisIsAnExtremelyLongEnglishWordWithoutAnySpace
    这是中文EnglishMixed文本的例子Example
</div>

显示效果：

英文和中文都会在容器边界强制断行

`keep-all`

断行行为 ：
- CJK（中日韩）文本：仅在空格/标点处断行（将连续 CJK 字符视为一个"单词"）
- 非CJK（中日韩）文本：表现同normal
示例：

html 复制代码

<div style="word-break: keep-all;">
    ThisIsAnExtremelyLongEnglishWordWithoutAnySpace
    这是中文EnglishMixed文本的例子Example
</div>

显示效果：

中文不会在字符间断行

3. 关于`break-word`的说明

历史背景

原属于word-break的非标准值
现已被规范移至overflow-wrap（原名word-wrap）属性
现代浏览器仍支持但已废弃

正确用法

css 复制代码

/* 错误（已废弃） */
.old {
  word-break: break-word; /* 非标准，部分浏览器可能不支持 */
}

/* 正确（标准写法） */
.new {
  overflow-wrap: break-word; /* 或使用别名 */
  word-wrap: break-word; /* 较旧浏览器的别名 */
}

4. 对比表格

值	CJK文本	非CJK文本
normal	任意字符断行	在空格/连接符处断行
break-all	任意字符断行	任意字符断行
keep-all	在空格/标点处断行	在空格/连接符处断行

四、overflow-wrap（原 word-wrap）属性详解

1. 定义与作用

控制长单词或不可分割字符串的换行行为
版本说明：
- overflow-wrap：CSS3 规范标准化后的名称
- word-wrap：最初的实现名称（所有浏览器都支持，推荐同时使用以保持兼容性）

2. 常用值及效果

`normal`（默认值）

换行行为 ：
- 只在正常断点（空格/连字符）处换行
- 长单词可能溢出容器
示例：

html 复制代码

<div style="overflow-wrap: normal;">
    This is a prettyveryveryveryveryverylong word.
</div>

显示效果：

长单词保持完整并溢出容器

`break-word`

换行行为：
- 优先尝试在空格/连接符处换行
- 如果没有合适断点，则在容器边界强制断行
示例：

html 复制代码

<div style="overflow-wrap: break-word;">
    This is a prettyveryveryveryveryverylong word.
</div>

显示效果：

其他值说明

initial：设置为默认值（normal）
inherit：继承父元素值

3. 对比表格

值	换行行为
normal	只在正常断点（空格/连字符）处换行
break-word	在容器边界强制断行

五、三者的对比与区别

1. 核心差异表格

特性	作用对象	主要功能
white-space	空白符（空格/制表符/换行符）	控制空白显示和基础换行
word-break	单词/CJK字符	控制断行位置
overflow-wrap	不可分割字符串	防止长单词溢出

2. 何时使用哪个属性

需要控制空白显示 → white-space
需要控制单词如何断开 → word-break
需要防止长单词溢出 → overflow-wrap

3. 最佳实践

文本溢出显示省略号

css 复制代码

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

保留代码格式

css 复制代码

.code-block {
  white-space: pre;       /* 保留所有空白和换行 */
}

中文强制换行

css 复制代码

.chinese-text {
  word-break: break-all;  /* 任意位置断行 */
}

英文长单词换行

css 复制代码

.english-text {
  overflow-wrap: break-word;
}

中英文混合排版

css 复制代码

.mixed-content {
  word-break: normal;      /* 保持默认规则 */
  overflow-wrap: break-word; /* 处理长单词 */
}

六、常见问题

Q1：white-space和word-break都能影响换行，区别是什么？

white-space是"是否允许换行"的总开关
word-break控制单词在哪里断开，仅在white-space允许换行时生效

Q2：overflow-wrap和word-break该如何选择？

场景	首选属性	理由
长单词处理	`overflow-wrap: break-word`	保留单词完整性
表格/紧凑布局	`word-break: break-all`	确保不溢出
中文为主内容	`word-break: normal`	保持中文排版习惯
用户生成内容	`overflow-wrap: break-word` + `word-break: normal`	平衡可读性与安全性

white-space、word-break、overflow-wrap（原名word-wrap）的区别

一、引言

二、white-space 属性详解

1. 定义与作用

2. 常用值及效果

normal（默认值）

nowrap

pre

pre-line

pre-wrap

break-spaces（CSS3新增）

其他值说明

3. 对比表格

三、word-break 属性详解

1. 定义与作用

2. 常用值及效果

normal（默认值）

break-all

keep-all

3. 关于break-word的说明

历史背景

正确用法

4. 对比表格

四、overflow-wrap（原 word-wrap） 属性详解

1. 定义与作用

2. 常用值及效果

normal（默认值）

break-word

其他值说明

3. 对比表格

五、三者的对比与区别

1. 核心差异表格

2. 何时使用哪个属性

3. 最佳实践

文本溢出显示省略号

保留代码格式

中文强制换行

英文长单词换行

中英文混合排版

六、常见问题

`normal`（默认值）

`nowrap`

`pre`

`pre-line`

`pre-wrap`

`break-spaces`（CSS3新增）

`normal`（默认值）

`break-all`

`keep-all`

3. 关于`break-word`的说明

四、overflow-wrap（原 word-wrap）属性详解

`normal`（默认值）

`break-word`