CSS的 white-space、word-break、overflow-wrap的用法

white-space、word-break、overflow-wrap 是 CSS 中用于控制文本换行、空白符处理及长文本溢出的三个核心属性，它们分工不同但常配合使用。以下是具体用法和区别：

一、white-space：控制空白符（空格、换行）的处理方式

核心作用 ：定义文本中空白符（空格、制表符、换行符）如何显示，以及文本是否自动换行。主要取值：

取值	效果说明	适用场景
normal	默认值。多个空格合并为一个，文本超出容器时自动换行。	普通文本段落
nowrap	多个空格合并为一个，文本不自动换行（强制在一行显示，可能溢出容器）。	单行文本（如导航菜单、标签）
pre	保留所有空白符（空格、换行原样显示），仅在原文本换行处换行（不自动换行）。	代码块、需要保留格式的文本
pre-wrap	保留所有空白符，且文本超出容器时自动换行。	保留格式的多行文本
pre-line	多个空格合并为一个，保留原文本换行，且文本超出容器时自动换行。	兼顾格式与自动换行的场景

示例：

css

/* 单行显示，溢出隐藏并加省略号 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 保留代码格式，且自动换行 */
.code-block {
  white-space: pre-wrap;
  font-family: monospace;
}

二、word-break：控制单词如何拆分换行（针对多语言）

核心作用 ：定义文本在容器边界处如何拆分单词以实现换行，尤其影响中文、日文等无空格语言，以及英文长单词。主要取值：

取值	效果说明	适用场景
normal	默认值。按语言规则拆分（中文在字符间换行，英文在空格 / 连字符处换行）。	普通多语言文本
break-all	允许在任意字符间强制拆分（包括英文单词内部），优先保证文本不溢出容器。	需强制换行以适应窄容器的场景
keep-all	不允许中文 / 日文 / 韩文在字符间拆分（仅在空格 / 标点处换行），英文同 normal。	需保持东亚文字完整性的场景

示例：

css

/* 英文长单词强制拆分，避免溢出（可能破坏单词完整性） */
.force-break {
  word-break: break-all;
  width: 100px; /* 窄容器 */
}

/* 中文不拆字，确保阅读连贯 */
.chinese-text {
  word-break: keep-all;
}

三、overflow-wrap（别名 word-wrap）：控制长单词是否允许内部拆分

核心作用 ：专门处理无空格的长字符串 （如长 URL、连续数字），决定是否允许在单词内部拆分以避免溢出（优先级低于 word-break）。主要取值：

取值	效果说明	适用场景
normal	默认值。仅在单词固有的拆分点（空格、连字符）处换行，不拆分单词内部（可能溢出）。	普通文本
break-word	优先在固有拆分点换行；若没有拆分点且文本溢出，允许在单词内部拆分（尽量保留单词完整性）。	处理长 URL、连续数字等
anywhere	类似 break-word，但计算容器宽度时更严格（忽略软换行机会），兼容性稍差。	现代浏览器中需要精确控制宽度的场景

示例：

css

/* 长URL自动拆分，避免溢出容器 */
.long-url {
  overflow-wrap: break-word;
  width: 200px;
}

四、三者的区别与配合使用

属性	核心关注点	典型场景示例
white-space	空白符处理 + 是否自动换行	单行文本、保留格式的代码块
word-break	单词 / 字符的强制拆分规则（多语言）	中文不拆字、英文强制拆分适应窄容器
overflow-wrap	长单词 / 无空格文本的内部拆分	处理长 URL、连续数字避免溢出

配合示例：实现 "保留空白符 + 自动换行 + 长单词拆分" 的评论区文本：

css

.comment {
  white-space: pre-line; /* 合并空格，保留换行，自动换行 */
  overflow-wrap: break-word; /* 长URL自动拆分 */
  width: 100%;
  max-width: 600px;
}

总结

• 控制空白符和换行开关 → 用 white-space；
• 处理多语言单词拆分（尤其是强制拆分）→ 用 word-break；
• 处理长字符串 / 单词的内部拆分（尽量保留完整性）→ 用 overflow-wrap。

根据文本类型（普通文本、代码、URL 等）和容器宽度需求，组合使用这三个属性可实现灵活的文本布局。