一、`word-break` 的核心作用与场景

word-break 是 CSS 中用于控制文本换行行为的属性，其核心价值在于解决非拉丁语系文本（如中文、日文）和长连续字符序列（如英文长单词、URL）在容器宽度不足时的换行问题。默认情况下，浏览器会优先在单词间的空白处换行，但当文本包含无空格的长字符串时，可能导致容器溢出或布局错乱。word-break 通过调整换行策略，确保文本在有限空间内完整显示。

典型应用场景包括：

窄容器文本适配：如侧边栏、卡片组件中的长文本。
多语言支持：处理中文、日文等 CJK（中日韩）文本的换行规则。
URL 或代码片段显示：防止长链接或无空格代码行撑破容器。
响应式设计：在不同屏幕尺寸下保持文本可读性。

二、`word-break` 的取值详解与图解

word-break 共有四个主要取值，每个取值对应不同的换行策略，以下通过图解与代码示例逐一解析。

1. `normal`（默认值）

行为：遵循默认的换行规则，即优先在单词间的空白处换行；对于 CJK 文本，允许在任意字符间换行；对于非 CJK 文本，仅在空白处或连字符处换行。
适用场景：大多数常规文本布局。
示例：

.container {
  width: 100px;
  word-break: normal;
}

效果：英文文本 "Supercalifragilisticexpialidocious" 不会换行，导致溢出；中文文本 "这是一段很长的中文文本" 会在任意字符间换行。

2. `break-all`

行为：强制在任意字符间换行，无视单词边界或语言规则。适用于需要严格限制宽度的场景，但可能破坏单词的可读性。
适用场景：显示长 URL、代码片段或需要绝对换行的窄容器。
示例：

.container {
  width: 100px;
  word-break: break-all;
}

效果：英文文本 "Supercalifragilisticexpialidocious" 会在任意字符间换行（如 "Super-ca-li-fra-gi-lis-tic-ex-pi-ali-do-ci-ous"）；中文文本同样在任意位置换行。

3. `keep-all`

行为：禁止 CJK 文本在字符间换行，强制将整个单词或短语视为不可分割的单元。适用于需要保持 CJK 文本完整性的场景。
适用场景：显示中文、日文标题或短文本，避免单个汉字换行。
示例：

.container {
  width: 100px;
  word-break: keep-all;
}

效果：中文文本 "这是一段很长的中文文本" 不会在单个汉字间换行，可能导致溢出；英文文本行为与 normal 相同。

4. `break-word`（已废弃，推荐使用 `overflow-wrap`）

注意：break-word 是旧版属性，现已被 overflow-wrap: break-word 替代。其行为与 break-all 类似，但优先级更低，仅在 normal 无法换行时生效。
替代方案：

.container {
  width: 100px;
  overflow-wrap: break-word;
}

三、`word-break` 与 `overflow-wrap` 的对比

属性	行为差异	适用场景
`word-break`	强制换行，无视单词边界（`break-all`）或禁止 CJK 换行（`keep-all`）	多语言支持、绝对宽度控制
`overflow-wrap`	仅在单词内部换行，保持单词相对完整（`break-word`）	防止长单词溢出，优先保持单词可读性

选择建议：

需要严格宽度控制时用 word-break: break-all。
需要保持单词可读性时用 overflow-wrap: break-word。
处理 CJK 文本时用 word-break: keep-all。

四、实际应用案例与代码示例

案例 1：窄容器中的长 URL

<div class="url-container">https://example.com/very/long/url/that/needs/to/break</div>

.url-container {
  width: 200px;
  border: 1px solid #ccc;
  word-break: break-all; /* 或 overflow-wrap: break-word */
}

效果：URL 会在任意字符间换行，避免溢出。

案例 2：多语言文本混合布局

<div class="multilingual">
  英文: Supercalifragilisticexpialidocious<br>
  中文: 这是一段很长的中文文本<br>
  日文: これは長い日本語のテキストです
</div>

.multilingual {
  width: 150px;
  border: 1px solid #ccc;
  word-break: break-all; /* 确保所有语言均能换行 */
}

效果：所有文本均会在任意字符间换行，适应窄容器。

案例 3：保持 CJK 文本完整性

<div class="cjk-text">这是一个需要保持完整的中文短语</div>

.cjk-text {
  width: 100px;
  border: 1px solid #ccc;
  word-break: keep-all; /* 禁止单个汉字换行 */
}

效果：短语会整体换行或溢出，不会拆分为单个汉字。

五、最佳实践与注意事项

优先级建议：
- 优先使用 overflow-wrap: break-word 处理长单词溢出。
- 需要强制换行时使用 word-break: break-all。
- 处理 CJK 文本时明确指定 keep-all 或 break-all。
兼容性：
- word-break 兼容所有现代浏览器。
- overflow-wrap 是 word-wrap 的现代替代方案，推荐使用。
性能影响：
- 频繁的换行计算可能影响渲染性能，避免在动态内容中过度使用。
可访问性：
- 强制换行可能破坏单词可读性，需在视觉设计与用户体验间权衡。

六、总结与延伸

word-break 是 CSS 中控制文本换行的关键属性，通过 normal、break-all、keep-all 三种取值，可灵活应对多语言文本、长单词及响应式布局的挑战。结合 overflow-wrap 使用，能更精准地平衡文本完整性与容器适配性。在实际开发中，建议根据内容类型（如 CJK 文本、URL、代码）和布局需求选择合适的属性组合，并通过测试验证不同场景下的显示效果。

图解 word-break：CSS 文本换行控制全解析

一、word-break 的核心作用与场景

二、word-break 的取值详解与图解

1. normal（默认值）

2. break-all

3. keep-all

4. break-word（已废弃，推荐使用 overflow-wrap）

三、word-break 与 overflow-wrap 的对比