white-space\word-wrap\word-break区分

white-space、word-wrap和word-break通常用来解决如下问题：

• 强制字符串过长在一行显示；
• 单词太长，希望折成多行显示（避免溢出）；
• 保留空格（敲了10个空格，最终只显示1个）
• 保留回车（敲了10个回车，浏览器完全不显示）

white-space

取值：

normal | nowrap | pre | pre-wrap | pre-line

normal：连续的空白符会被合并，换行符会被当作空白，宽度不够时会折行。
nowrap：同normal，但不会折行。
pre：连续的空白符会被保留，换行符、
也会引起换行，但不会折行。
pre-wrap：同pre，但是会折行。
pre-line：同pre-wrap，但是连续的空白符会被合并。

合并的空白宽度由word-spacing属性设置。

作用：

white-space作用于空格和回车上，用于控制：

• 空格是否合并
• 回车是否解释成折行
• 句子太长是否在有空格处折行

属性解读：

	空格和制表符	换行符newline	自动换行
normal	合并	合并	换行
nowrap	合并	合并	不换行
pre	保留	保留	不换行
pre-wrap	保留	保留	换行
pre-line	合并	保留	换行

white-space：有一堆pre开头的值，pre到底是啥意思？

pre是preserve（保留）的缩写，可以这样理解：

• pre：保留（preserve)所有的空格和回车，且不允许折行。（将折行也看成一种非preserve)
• pre-wrap:保留（preserve)所有的空格和回车，但允许折行（wrap)。
• pre-line:仅仅保留（preserve)回车（line)，会合并空格，且允许换行。

word-wrap

取值

normal | break-word

作用：

word-wrap属性作用于单词上，允许浏览器在单词内进行断句，为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

属性解读：

normal:浏览器默认单词断行。

break-word：会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；

word-break

取值：

normal |break-word | break-all |keep-all

作用：

wordk-break属性作用于单词上，用来标明怎么样进行单词内的断句

属性解读：

• normal：浏览器预设的单词断行(优先考虑在空白字符处折行)，英文以词断行（不做任何断词），中文则以字断行。如图：
  
  

  image.png

• break-word：与设置word-wrap:break-word的效果相同。

• break-all：不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

• keep-all ：用词断行,同normal，但 CJK 文本不断行。如图
  

  

  image.png