CSS换行知识

换行规则

CSS可以指定文字多行时换行的规则，说白了就是指定哪些地方可以换行

相关属性

word-break

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

word-break属性决定了文本溢出时内容区的文本换行方式

属性值

关键值

normal(默认值)

break-all

允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行

看起来就是超出部分直接截断，无论单词是否完整

keep-all

不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致

break-world(被废弃)

word-break

属性值

关键值

normal(默认值)

break-word

表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

word-break:break-all和word-wrap:break-word的区别

word-break: break-all 在任意溢出都换行，word-wrap:break-word 如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行，至于对不对齐，好不好看，则不关心

总结

目前单词断行没有那么受重视，可以直接使用word-break:break-all 达到断行不留空白的效果，更多应用，后续遇到会添加