word-wrap、word-break和white-space

1. word-wrap

CSS3属性，允许 $\color{red}{长单词}$ 或者 $\color{red}{URL地址}$ 换行到下一行。

1.1 基本属性值

属性值	说明
normal	只在允许的断字点换行（浏览器保持默认处理）
break-word	在长单词或 URL 地址内部进行换行。

1.2 应用示例

QQ图片20190422161509.png

    <div class="p1 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p2 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
  </body>
  <style>
    .p {
      width: 90px;
      margin:  20px 100px;
      border: 1px solid #dedede;
      float: left;
    }

    .p1 {
      word-wrap: normal;
    }

    .p2 {
      word-wrap: break-word;
    }

1.3 其他

word-wrap已经被W3C规范为overflow-wrap了，各浏览器支持情况如下：

F35035B0-6EC2-4315-8AB0-F218A597C489.png
word-wrap必须在white-space属性支持换行的前提下才能起到作用(默认是换行的)

2. word-break

CSS3属性，规定自动换行的处理办法

2.1 基本属性值

属性值	说明
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。不是别中文自动换行，所以要慎重使用。

2.2 应用示例

F415EF48-5620-49c4-9421-81CA71F8FDD3.png

    <div class="p1 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p2 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p3 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
   .p {
      width: 90px;
      margin:  20px 60px;
      border: 1px solid #dedede;
      float: left;
    }

    .p1 {
      word-break: normal;
    }

    .p2 {
      word-break: break-all;
    }

    .p3 {
      word-break: keep-all;
    }

2.3 其他

word-break必须在white-space属性支持换行的前提下才能起到作用(默认是换行的)

3. white-space

设置如何处理元素内的空白

3.1 基本属性值

属性值	说明
normal	默认。空白会被浏览器忽略。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 br标签为止。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

3.2 应用示例

34D850CA-A8A4-49ed-912C-BB139CF8E9A2.png

    <div class="p1 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p2 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p3 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p4 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    <div class="p5 p">
      the only Chinese-speaking tour guide at the visitor center of the UN headquarters
      联合国总部游客中心唯一一位说中文的导游。
    </div>
    .p {
      width: 90px;
      margin:  20px 100px;
      border: 1px solid #dedede;
    }

    .p1 {
      white-space: normal;
    }

    .p2 {
      white-space: nowrap;
    }

    .p3 {
      white-space: pre;
    }

    .p4 {
      white-space: pre-wrap;
    }

    .p5 {
      white-space: pre-line;
    }

3.3 其他

white-space其实针对自动换行、换行、空白符进行了设置，通过设置不同的属性值，这三者支持会有所不同：

属性值	换行符	自动换行	空格符
normal	no	yes	no（合并）
nowrap	no	no	no（合并）
pre	yes	no	yes
pre-wrap	yes	yes	yes
pre-line	yes	yes	no（合并）

IE浏览器下（包括IE8）都不支持inherit属性，建议慎用。

总结

word-wrap（overflow-wrap）: 定义过长单词是否换行。
word-break: 定义自动换行的时候是否可以拆分单词。
white-space: 设置如何处理自动换行、换行符、空白符。

示例源码地址：

参考文献

https://www.quackit.com/css/css3/properties/css_overflow-wrap.cfm
https://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.html