先从white-space谈起，white-space顾名思议，控制“空白空间”。为了看清区别，我们设置一段源文本，包含三行文本（非br换行），每一行可能包含连续多个空格。如下图
源文本
再将white-space设置成不同的值，可以清楚地看到各个值之前的区别
normal—— 合并多个空格：是； 源文本换行符换行：否；自动换行：是
pre-line—— 合并多个空格：是； 源文本换行处换行：是；自动换行：是
pre-wrap—— 合并多个空格：否； 源文本换行处换行：是；自动换行：是
pre—— 合并多个空格：否； 源文本换行处换行：是；自动换行：否
no-wrap—— 合并多个空格：是； 源文本换行处换行：否；自动换行：否
white-space
但是，如果某个单词很长，white-space是否会自动换行呢？我们试一下，在preWrap的文本中加一个无空格的长单词，很遗憾，长单词并没有自动换行。
因此，可以明确：white-space只对空白相关的显示进行处理，white-space的自动换行，也只会在空白中进行自动换行。
但是，对于长单词，怎么处理？
看下一个属性，word-break，同样顾名思义，word-break是处理单词换行的属性。把所有属性列出来看看区别
以下都先设置了white-space:pre-wrap
break-word——换单词换行，尽量不截断单词本身；对于当前行显示不全的单词，先换到一个新行，如果还是显示不全，则按字符换行。
break-all—— 换字符换行。优点是看上去左右都对齐，缺点是行末的单词会被截断，影响阅读。
keep-all—— 单词不换行。超出的就显示到元素外
normal—— 看上去和keep-all一样。
新的问题来了，normal和keep-all到底有没有区别？我们加上汉字试试
看出区别了吗？
normal——对于汉字（严格来说是Chinese/Japanese/Korean (CJK)）会换字符自动换行
keep-all——对CJK文字，也只按空白和符号换行。
所以，如果我们希望文字显示达到如下条件
1、空格，换行尽量和原文一致
2、确实超出的自动换行
3、尽量不影响阅读（按单词换行）
需要设置的CSS为
white-space: pre-wrap;
word-break: break-word;
效果如下
最后，关于word-wrap，其实wror-wrap只是早期浏览器的word-break不完善时，对word-break的补充
word-wrap具有可选值为：break-word, normal。效果和word-break对应的值效果一样。
网友评论