---恢復內容開始---

word-break|overflow-wrap|word-wrap——CSS英文斷句淺析

一 問題引入

? ? ?今天在再次學習 overflow 屬性的時候，查看效果時，看到如下結果，內容在 div 中國換行了，可是兩個 P 元素的內容并沒有換行，搜索一番沒有找到系統的答案，截圖到群里請教大神，才知道是英文斷句的問題，但是還是不太明白。之前沒有遇到這種情況，為了徹底搞清楚，英文斷句，又開始學習英文斷句到底是怎么回事。

?二 換行

?　　每種語言里都有換行，就中文而言，我們最小語言單位是字，字組成詞語，在詞語換行，不會影響詞義，英文的最小語言單位應該是單詞，而單詞是用字母組成的，字母可拆分，也就是能在單詞內換行，而拆分后可能影響單詞的意思或者產生歧義，抑或是閱讀體驗不佳，這是英文換行和中文換行的差異。為了不讓閱讀者產生歧義，中文換行和平時用中文寫作類型，在標點符號的末尾換行，就是標點符號不能在開頭，詞語可以換行，標點符號通常就是中文句子的斷點。

　　對于內容自適應的盒子，也就是寬度用內容決定的盒子，不存在換行導致歧義的問題，比如浮動盒子。對于固定寬度或者自適應容器的盒子，存在換行導致歧義的問題。

① word-break:normal|keep-all|break-all| (默認為 normal ,還有兩個值，用的很少，就不寫了)?

? ? ?mdn 解釋和翻譯：

?The?word-break?CSS property is used to specify whether to break lines within words. ?word-break 屬性是用于說明師是否在單詞內換行。

Applies to ?　all elements

Inherited 　　Yes

normal: Use the default line break rule. ??

keep-all:Don’t allow word breaks for CJK text, Non-CJK text behavior is the same as for nomal. ?不許在中文、日語、韓語單字內換行，非CJK文本和 normal 相同。

break-all:Word breaks may be inserted between and chararcter for non-CJK(Chinese/Japanese/Korean). ?可以在非CJK單字內換行。

中文換行是和我們寫作一樣的規則，我們主要來看書英語和數字，這三者的區別。把一串數字看成一個整體，造了一個不存在的單詞 lon.....ng。

?實例

HTML

1 <div id="outbox"> 2 <div class="innerbox"> 3 <h6>word-break:normal</h6> 4 <p class="p1 "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 5 </div> 6 <div class="innerbox"> 7 <h6>word-break:keep-all</h6> 8 <p class="p2 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 9 </div> 10 <div class="innerbox"> 11 <h6>word-break:break-all</h6> 12 <p class="p3 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 13 </div> 14 </div>

?

CSS:

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

1 #outbox { 2 width: 160px; //外層盒子指定寬度，內部盒子可以適應外部盒子的寬度 3 border: 1px solid green; 4 } 5 6 p { 7 font-size: 16px; 8 border: 2px solid red; 9 padding: 5px; 10 background: #f29705; 11 }

?

p1，p2， p3 的樣式：

1 　　　　　.p1 { 2 word-break: normal; 3 } 4 5 .p2 { 6 word-break: keep-all; 7 } 8 9 .p3 { 10 word-break: break-all; 11 } 12

?

效果圖：

?

觀察各個屬性值得表現，可以看到 word-break 的各種值得區別。

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

　　word-break:break-all——content-edge處斷句，單詞可能被破壞，不會溢出；

　　word-break:keep-all——斷點斷句，可能溢出，表現和 word-break:normal 相同。

---

?

② overflow-wrap:normal | ?break-word

　　MDN 的解釋和我的翻譯：

The?overflow-wrap?property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box. ? ?overflow-wrap 屬性是用來說明當一個不可截斷的字符串太長而不能被包含在盒子中時，是否在單詞內換行以阻止單詞溢出。也就是當一個單詞的長度比包含它的盒子還要寬，用這個屬性能在這個單詞內換行以達到不溢出的效果。?

Applies to　　all elements

Inherited　　 yes

normal:?Indicates that lines may only break at normal word break points. 聲明只能在單詞的斷點換行。

break-word:?Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. 聲明如果沒有可斷點處，則可以在單詞的任何處換行。（不好理解好）

例子：

pa ?pb 的html: ?

?

2 <div?id="outbox">
<div class="point "> 3 <h4>overflow-wrap:normal</h4> 4 <p class="pa "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 5 </div> 6 <div class="point "> 7 <h4>overflow-wrap:break-word</h4> 8 <p class="pb ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 9 </div> 10 </div>

?

CSS:

1 .pa { 2 overflow-wrap: normal; 3 } 4 5 .pb { 6 overflow-wrap: break-word; 7 }

?

效果：

ADAD

?

觀察效果圖，可以看出兩者的區別：

　　overflow-wrap:normal——斷點斷句，單詞不被破壞，可能溢出；

　　overflow-wrap:break-word——先斷點，單詞過長再在末尾斷句，單詞可能被破壞，不會溢出。

---

?

③ word-wrap: normal | break-word?

　　MDN 的描述和翻譯：

??

?

HTML:

1 <div id ="outbox"> 2 <div class="point "> 3 <h4>word-wrap:normal</h4> 4 <p class="pA "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 5 </div> 6 <div class="point "> 7 <h4>word-wrap:break-word</h4> 8 <p class="pB "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p> 9 </div> 10 </div>

?

pA pB的CSS:

1 .pA { 2 word-wrap: normal; 3 } 4 5 .pB { 6 word-wrap: break-word; 7 }

?

效果圖：

觀察效果圖，可以看出兩者的區別：

　　word-wrap規定如何斷句，

　　word-wrap:normal——只是斷點斷句，單詞過長就可能溢出；

　　word-wrap: break-word——先斷點斷句，單詞過長，一行放不下，再在任末尾斷句，單詞可能被破壞，不會溢出。

?

?

?

?

---恢復內容結束---

轉載于:https://www.cnblogs.com/jackzhoumine/p/6254315.html

總結

以上是生活随笔為你收集整理的word-break|overflow-wrap|word-wrap——CSS英文断句浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。