CSS word-break word-wrap white-space
1）word-break
作用：指定如何在单词内断行。
取值：
/* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; /* Global values */ word-break: inherit; word-break: initial; word-break: unset;
我们一般用的是前三种，默认取值为normal。
1. normal: 使用默认的断行规则。
2. break-all: 对于non-CJK (中文/日文/韩文) 文本，可在任意字符间断行。
3. keep-all: CJK文本中不允许单词换行，要想换行只能在空格或者连字符处换行。非CJK的文本表现行为和normal一致。
另外，还有一种break-word的用法,这个并没有在标准中列出，在can i use中找到了这个，知道下就行了。相当于设置word-wrap:break-word.
Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.
例子：
<p>1. <code>word-break: normal</code></p> <p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> <p>2. <code>word-break: break-all</code></p> <p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p> <p>3. <code>word-break: keep-all</code></p> <p class="keep narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
.narrow { padding: 5px; border: 1px solid; width: 8em; } .normal { word-break: normal; } .breakAll { word-break: break-all; } .keep { word-break: keep-all; }
Result：
2）word-wrap
作用：浏览器是否允许单词中断换行，在CSS3标准中已被更名为overflow-wrap，但是目前IE不支持。
取值：
/* Keyword values */ word-wrap: normal; word-wrap: break-word; /* Global values */ word-wrap: inherit; word-wrap: initial; word-wrap: unset;
一般用前两种，默认值是normal。
1. normal: 表示在正常的单词结束处换行。
2. break-word: 如果一行内没有多余的地方容纳单词到结尾，那么如果应用break-word，会将整个不能被分割的单词强制换行，所以会看到有些时候有一些空白的区域。
例子：
<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> <p class="breakWord">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
.normal { width: 13em; background: gold; } .breakWord { width: 13em; background: gold; overflow-wrap: break-word; }
结果：
3) white-space:
作用：规定如何处理空格和回车。
取值：
/* Keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; /* Global values */ white-space: inherit; white-space: initial; white-space: unset;
举个例子来看：
<style> .test { width: 200px; border: 1px solid red; margin-bottom: 10px; } .normal { white-space: normal; } .pre { white-space: pre; } .pre-wrap { white-space: pre-wrap; } .pre-lie { white-space: pre-lie; } .nowrap { white-space: nowrap; } </style>
HTML：
<div class="test normal"> Hi, I am NORMAL. I come from China. Do you want to make friends with me？ Hahaha. Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy! </div> <div class="test pre"> Hi, I am PRE. I come from China. Do you want to make friends with me？ Hahaha. Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy! </div> <div class="test nowrap"> Hi, I am NOWARP. I come from China. Do you want to make friends with me？ Hahaha. Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy! </div> <div class="test pre-wrap"> Hi, I am PRE-WRAP. I come from China. Do you want to make friends with me？ Hahaha. Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy! </div> <div class="test pre-line"> Hi, I am PRE-LINE. I come from China. Do you want to make friends with me？ Hahaha. Hey, Would you like to go to New Yorkkkkkkkkkkkkkkkkkk it's a beautiful cityyyyyyyyyyyyy! </div>
结果：
从结果是可以看出来：
1. normal：合并连续的空白字符和换行符！
2. pre: 就是在html中写的是什么样，显示出来还是什么样，空白字符不会被合并，换行符也不会合并。
3. nowrap: 连续的空白符会被合并，但是会忽视文本中的换行符，文本将在同一行显示。
4. pre-wrap: 连续的空白符，换行符都会进行保留，但是允许折行。
5. pre-line: 连续的空白符会被合并，换行符会被保留，允许折行。
下面这张表从MDN上抄过来的。
参考资料：
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
