正确使用word-break属性可避免单词被截断：优先选用normal或keep-all值，确保英文单词在空格处换行；搭配white-space:normal和固定宽度容器，提升文本可读性。
在CSS中控制文本换行时，如果希望避免单词被不恰当地截断，正确使用 word-break 属性是关键。它决定了文字在何处换行，尤其在处理英文或长串字符时尤为重要。
理解 word-break 的常用值
word-break 属性有以下几个常用取值，直接影响文本的换行行为：
- normal：使用默认的换行规则。单词不会在任意字符间断开，中文按字换行，英文按单词换行。
- break-all：允许在任意字符间断行，即使单词中间也会被截断。常用于表格内防止内容溢出，但会破坏单词完整性。
- keep-all：只允许在空格或连字符处换行，特别适用于中英文混合场景，防止英文单词被拆开。
如何防止单词被截断？
如果你发现英文单词在显示时被从中间断开（如 "hello" 显示成 "hel" 和 "lo"），应避免使用 word-break: break-all，改用以下方式：
- 使用 word-break: normal 或 word-break: keep-all，确保英文单词整体换行。
- 搭配 white-space: normal，允许正常换行。
- 必要时设置容器宽度，触发换行条件。
实际示例
假设你有一个固定宽度的 div，里面包含英文句子：
立即学习“前端免费学习笔记（深入）”；
<div style="width: 100px; word-break: keep-all; white-space: normal;"> This is a long sentence. </div>
此时，浏览器会尽量保持每个单词完整，只在空格处分行，避免将 "sentence" 拆成两行。
与 word-wrap 的区别
注意不要混淆 word-break 和 word-wrap（也称 overflow-wrap）：
- word-break 控制是否可以在任意位置断开字符。
- word-wrap: break-word 是在单词过长无法容纳时，才将其断开以防止溢出。
若想优先保留单词完整，但在极端情况下允许断开，可使用 word-wrap: break-word 而非 word-break: break-all。
基本上就这些。合理选择 word-break 的值，能有效避免文本显示时的单词截断问题，提升可读性。
