css的文本换行之word-break

用途

用于打断单词

属性

normal（浏览器默认表现）

剩余位置无法容纳当前单词时：
● 如果是首行，单词将溢出容器。
● 如果非首行，将单词放到下一行，如果下一行仍然放不下，单词将溢出容器。

break-all

剩余位置无法容纳当前单词时，把单词打断为两部分，一部分塞到当前行的剩余位置，另一部分放到下一行，如果下一行容纳不下，继续这个打断操作。

keep-all

阻止CJK（中日韩）语言的自动换行。

应用场景

break-all的使用场景

url、长单词、用户输入的非预期内容

使用前：

注意：hello所在行的剩余位置是空的

使用后：

注意：hello所在行的剩余空白位置被填满了

keep-all的使用场景

暂时想不到该值的应用场景，个人觉得不想让中文换行的情况，正常的做法应该是给足空间。

使用前：

注意：当容器位置不够的时候，中文会自动换行。

使用后：

注意：当容器位置不够的时候，中文不会自动换行了，而是溢出容器。

注意事项

break-word

已废弃的值，不讲了，避免增加认知负担。