图解 word-break - 技术栈

在上一篇文章中为大家介绍了 overflow-wrap 属性的用法，与之非常类似的是 word-break 属性，很多同学容易搞混，今天为大家详细讲解。

work-break 用于指定如何进行单词内的断行，有四个取值：

normal：默认的断行规则。
break-all：允许在单词内任意位置断行。
keep-all：CJK（中文、日文、韩文）文本不会断行，保持单词不拆分。
break-word：效果等同于 word-break: normal 和 overflow-wrap: anywhere（注意：该属性被废弃了，虽然目前各浏览器还是支持的，建议大家不要使用。）

语法如下：

css 复制代码

/* 不在单词内断行 */
p {
  word-break: normal;
}

/* 单词碰到容器边界就断行 */
p.break-all {
  word-break: break-all;
}

/* 避免在CJK文本中句子内断行 */
p.keep-all {
  word-break: keep-all;
}

/* 如果溢出，允许在单词内任意位置断行 */
p.break-word {
  word-break: break-word;
}

首先看英文段落的场景：

可以看到，设置了 break-all 属性的段落，只要单词碰到容器边界，就立即换行，根本不关心单词是否被拆成两半，会造成一定的阅读困难 。对于一般的文本段落，是非常不推荐设置成 break-all 属性的，但是有很多同学用它来解决下面的文本溢出问题：

其实，上面的溢出可以用 overflow-wrap 属性来灵活处理，而不是 work-break，具体可参考这篇文章。break-all 对英文段落的杀伤力非常大，务必谨慎使用。再来看中文段落的情况：

keep-all 与众不同的排版方式就体现出来了，CJK 字符不再是可以在任意字符处进行截断，而是类似于英文单词一样，默认不截断，只在句子分界处进行截断，即在标点符号处进行了换行。不过如果句子很长（相当于英文长单词），那么就会发生溢出：

在中英文混排的场景，能够更好的体现不同属性之间的区别：

normal：中文任意字符处换行，英文单词分界处换行。
break-all：中英文都任意字符处换行。
keep-all：中文句子分界处换行，英文单词分界处换行。
break-word：中文任意字符处换行，英文单词分界处换行，但是如果发生文本溢出，则自动换行。

可以看到，使用 break-all 时，它会在任何字符之间断开，这可能会导致英文单词在任意位置被拆分，而 keep-all 值主要用于东亚文字，不会在字之间断开，而是在句子分界处断开，一般是在标点符号处换行。

最后再强调一下 word-break 属性和 overflow-wrap 属性的主要区别：

word-break 可以对英文单词强制断行（break-all），对中文句子强制不断行（keep-all）。
overflow-wap 主要处理超出容器边界时的行为，以及影响到如何计算元素的最小尺寸。