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码点判断)是同一种语言,所以换行也不影响阅读理解。所以允许在连接词处换行。而对于下面的中文是可以在任意唯一换行。
浏览器的换行行为最少是基于一个字符为单位的,不会把一个字符拆开换行显示,例如 好 不会拆成 女 和 子 展示。