CSS中的空白处理（white-space、word-break、word-wrap）详解

1. 问题描述
在CSS中处理文本内容时，我们经常会遇到空白符（空格、换行符、制表符）和长单词/URL的显示问题。比如文本不按预期换行、多余空白符被合并、或内容溢出容器。CSS提供了white-space、word-break和word-wrap（overflow-wrap）三个属性来控制这些行为。

2. 属性详解

2.1 white-space属性
控制元素内空白符的处理方式，有5个常用值：

• normal（默认）：合并连续的空白符，自动换行
• nowrap：合并空白符，但禁止自动换行
• pre：保留所有空白符（包括换行），只在遇到换行符或<br>时换行
• pre-wrap：保留空白符序列，允许自动换行
• pre-line：合并连续空白符，但保留换行符，允许自动换行

示例演示：

<div style="width: 200px;">
Hello   World
How are you?
</div>

• white-space: normal → "Hello World How are you?"（合并空白，自动换行）
• white-space: nowrap → 所有文本在一行显示（不换行）
• white-space: pre → 严格保留空白和换行
• white-space: pre-wrap → 保留空白但允许自动换行
• white-space: pre-line → 合并空白但保留原换行

2.2 word-wrap/overflow-wrap属性
控制长单词或URL的换行行为：

• normal：单词不中断，可能溢出容器
• break-word：在单词内任意位置换行（CSS3中建议使用overflow-wrap）

2.3 word-break属性
指定文本的换行规则，特别是中英文混合场景：

• normal：默认换行规则
• break-all：允许在任意字符间换行（针对CJK文本）
• keep-all：只能在半角空格或连字符处换行

3. 属性对比与组合使用

3.1 换行行为对比

• white-space: nowrap → 完全禁止换行
• word-wrap: break-word → 优先在单词间换行，必要时断词
• word-break: break-all → 无视单词完整性，直接断行

3.2 实际应用场景

/* 代码块显示 */
.code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* 强制单行显示 */
.single-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 中文换行优化 */
.chinese-text {
  word-break: break-all;
  word-wrap: break-word;
}

4. 浏览器兼容性提示

• overflow-wrap是word-wrap的标准名称，建议同时使用
• 旧版IE浏览器对word-break支持有差异
• 移动端浏览器可能需要-webkit前缀

5. 总结
这三个属性分别从不同维度控制文本显示：

• white-space：控制空白符处理
• word-wrap/overflow-wrap：控制长单词换行
• word-break：控制换行严格程度

合理组合使用可实现各种文本显示需求，特别是多语言环境和响应式设计场景。