word-break，word-wrap和white-space

我们先看看不加任何属性是如何换行处理的
下面各类属性都是加在一个p元素上的。

p {
    width: 300px;
    padding: 5px;
    background-color: #f0f3f9;
    font-size: 14px;
}

我们看到不加任何属性时候，边界遇到中文自动换行。英文需要有空格才会换行。如果一个单词长到一行都无法显示完全的话，这个单词则不会进行换行，而是溢出显示。

word-break

word-break: normal; //使用默认的换行规则。
word-break: break-all; //允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
word-break: keep-all;//不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字
符处换行。非CJK文本的行为实际上和normal一致。

word-break:break-all

我们看到word-break:break-all就是非常暴力的遇见什么折断什么的方式进行换行。

word-break: keep-all

我们可以看到中文在没有遇到半角空格或连字符时，是不进行换行的。而非CJK文本的行为表现和normal一致。

word-wrap

word-wrap: normal;
word-wrap: break-word;//一行单词中实在没有其他靠谱的换行点的时候换行。

仅用于块对象，内联对象要用的话，必须要设定height、width或display:block或position:absolute。

word-wrap: break-word

word-wrap:break-word则带有怜悯之心，如果这一行文字有可以换行的点，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，则就不打英文单词或字符的主意了，让这些换行点换行。如果没有其他可以换行的符号空格等再折断单词进行换行。
记忆方法word-wrap: break-word 和 word-break:break-all
有两个break的就是很强硬的斩断一切的。只有一个break的相对比较温和。先看空格之类的换行符。

white-space

white-space是字符是否换行显示的

常用的单行文本超出显示...

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

多行显示...

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