1. word-wrap

CSS3属性，允许或者换行到下一行。

1.1 基本属性值

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 其他

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

   
   
   F35035B0-6EC2-4315-8AB0-F218A597C489.png

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

2. word-break

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

2.1 基本属性值

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 其他

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

3. white-space

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

3.1 基本属性值

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 其他

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

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

总结

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

示例源码地址：

1. http://www.freerf.top/study/html5/css3/word-wrap/index.html
2. http://www.freerf.top/study/html5/css3/word-break/index.html
3. http://www.freerf.top/study/html5/css3/white-space/index.html

参考文献

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