---恢复内容开始---

word-break|overflow-wrap|word-wrap——CSS英文断句浅析

一问题引入

今天在再次学习 overflow 属性的时候，查看效果时，看到如下结果，内容在 div 中国换行了，可是两个 P 元素的内容并没有换行，搜索一番没有找到系统的答案，截图到群里请教大神，才知道是英文断句的问题，但是还是不太明白。之前没有遇到这种情况，为了彻底搞清楚，英文断句，又开始学习英文断句到底是怎么回事。

word-break|overflow-wrap|word-wrap——CSS英文断句浅析-LMLPHP

二换行

　　每种语言里都有换行，就中文而言，我们最小语言单位是字，字组成词语，在词语换行，不会影响词义，英文的最小语言单位应该是单词，而单词是用字母组成的，字母可拆分，也就是能在单词内换行，而拆分后可能影响单词的意思或者产生歧义，抑或是阅读体验不佳，这是英文换行和中文换行的差异。为了不让阅读者产生歧义，中文换行和平时用中文写作类型，在标点符号的末尾换行，就是标点符号不能在开头，词语可以换行，标点符号通常就是中文句子的断点。

　　对于内容自适应的盒子，也就是宽度用内容决定的盒子，不存在换行导致歧义的问题，比如浮动盒子。对于固定宽度或者自适应容器的盒子，存在换行导致歧义的问题。

① word-break:normal|keep-all|break-all| (默认为 normal ,还有两个值，用的很少，就不写了)

mdn 解释和翻译：

中文换行是和我们写作一样的规则，我们主要来看书英语和数字，这三者的区别。把一串数字看成一个整体，造了一个不存在的单词 lon.....ng。

实例

HTML

     <div id="outbox">

         <div class="innerbox">

             <h6>word-break:normal</h6>

             <p class="p1 "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

         </div>

         <div class="innerbox">

             <h6>word-break:keep-all</h6>

             <p class="p2 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

         </div>

         <div class="innerbox">

             <h6>word-break:break-all</h6>

             <p class="p3 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

         </div>

     </div>

CSS:

大家共用的 outbox 和所有p元素：

      #outbox {

             width: 160px;  //外层盒子指定宽度，内部盒子可以适应外部盒子的宽度

             border: 1px solid green;

         }

         p {

             font-size: 16px;

             border: 2px solid red;

             padding: 5px;

             background: #f29705;

         }

p1，p2， p3 的样式：

 　　　　　.p1 {

             word-break: normal;

         }

         .p2 {

             word-break: keep-all;

         }

         .p3 {

             word-break: break-all;

         }

效果图：

word-break|overflow-wrap|word-wrap——CSS英文断句浅析-LMLPHP

观察各个属性值得表现，可以看到 word-break 的各种值得区别。

　　word-break:normal——按照一般的断点断句，可能溢出；

　　word-break:break-all——content-edge处断句，单词可能被破坏，不会溢出；

　　word-break:keep-all——断点断句，可能溢出，表现和 word-break:normal 相同。

② overflow-wrap:normal | break-word

　　MDN 的解释和我的翻译：

例子：

pa pb 的html:

 <div id="outbox">
      <div class="point ">

               <h4>overflow-wrap:normal</h4>

               <p class="pa "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

          </div>

          <div class="point ">

              <h4>overflow-wrap:break-word</h4>

               <p class="pb ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

         </div>

 </div>

CSS:

         .pa {

             overflow-wrap: normal;

         }

         .pb {

             overflow-wrap: break-word;

         }

效果：

ADAD

观察效果图，可以看出两者的区别：

　　overflow-wrap:normal——断点断句，单词不被破坏，可能溢出；

　　overflow-wrap:break-word——先断点，单词过长再在末尾断句，单词可能被破坏，不会溢出。

③ word-wrap: normal | break-word

　　MDN 的描述和翻译：

HTML:

  <div id ="outbox">

     <div class="point ">

             <h4>word-wrap:normal</h4>

             <p class="pA "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

         </div>

         <div class="point ">

             <h4>word-wrap:break-word</h4>

             <p class="pB "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>

         </div>

 </div>

pA pB的CSS:

        .pA {

             word-wrap: normal;

         }

         .pB {

             word-wrap: break-word;

         }

效果图：

word-break|overflow-wrap|word-wrap——CSS英文断句浅析-LMLPHP

观察效果图，可以看出两者的区别：

　　word-wrap规定如何断句，

　　word-wrap:normal——只是断点断句，单词过长就可能溢出；

　　word-wrap: break-word——先断点断句，单词过长，一行放不下，再在任末尾断句，单词可能被破坏，不会溢出。

---恢复内容结束---

断句