word-break控制的几种容器换行行为详解

word-break 属性在控制换行行为时需要根据语言判断，对于中文 一个字符就是一个单词，字符换行不影响阅读理解，而对于英文来说，多个连续的字符才会是一个单词，例如中文的 早 英文为 morning。 morning7个字符才算一个单词，mo rni ng 如果是呈现这种情况，是及其不易阅读理解。也就是说 word-break的换行行为是和字符的unicode码有关。

• break-all
  允许容器内的单词不连续换行，也就是当字符到达容器边界时，可以拆词，这是主要是适用于英文、字符、数字的。例如允许将moring换行成
  mo
  rni
  ng

<div style="width: 100px;background-color: lightblue;"><span style="word-break: break-all">Good morningmorningmorning! Good morning!Good morning!</span>
</div>

设置了break-all就是在任意位置可以换行。

• keep-all

keep-all对于英文单词，会保持一个完整的单词不会换行，除非遇到空格，而对于中文遇到空格或者标点符合会换行，否则连续的中文字符也会保持在一行。

<div style="width: 100px;background-color: lightblue;"><span style="word-break: keep-all">Good morningmorningmorning! Good morning!Good morning!</span>
</div>
<br>
<br>
<br>
<br>
<div style="width: 100px;background-color: yellowgreen;"><span style="word-break: keep-all ">早上好.早上好早上好早上好早上好早上 好早上好早上好</span>
</div>

• normal

对于英文来说 会在空格或中文连字符处换行，对于中文会在任意位置换行。

<div style="width: 100px;background-color: lightblue;"><span style="word-break: normal">Good morningmorni中ngmorning! Good morning!Good morning!</span>
</div>
<br>
<br>
<br>
<br>
<div style="width: 100px;background-color: yellowgreen;"><span style="word-break: normal ">早上好.早上好早上好早上好早上好早上 好早上好早上好</span>
</div>

这里可以看到第一段中的英文会在“”中“” 这个连接词位置换行，浏览器会认为一个英文字符串不会和一个中文（通过Unicdoe码点判断）是同一种语言，所以换行也不影响阅读理解。所以允许在连接词处换行。而对于下面的中文是可以在任意唯一换行。

浏览器的换行行为最少是基于一个字符为单位的，不会把一个字符拆开换行显示，例如 好 不会拆成 女 和 子 展示。