資訊專欄INFORMATION COLUMN
摘要：英文換行來到英文，情況就要復雜一些。在英文中有單詞的概念，所以在換行時就得考慮單詞的完整性。上面介紹的值，主要也是針對英文的，漢字還是按照瀏覽器的默認行為，裝不下就換行。最后顯示時，英文還是按照默認行為，中文變成了不換行。
上一篇博客中介紹white-space屬性時聊到了換行，這一篇介紹換行的細節。
瀏覽器的默認行為瀏覽器的換行行為，對于中文和英文存在一些差別。
中文換行正如上一篇博客中所說的，中文換行比較簡單，這一行放不下就換行。除了中文之外，韓文和日文的處理也是一樣的。這三種文字合在一起就是MDN介紹word-break屬性時所說的CJK（Chinese, Japanese, Korean的縮寫）。
英文換行來到英文，情況就要復雜一些。在英文中有單詞的概念，所以在換行時就得考慮單詞的完整性。
瀏覽器按照空格來識別單詞，默認情況下，瀏覽器不會在單詞內換行
thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
我們在p標簽內部放了一些英文字母，這些字母之間并沒有用空格來分隔開來，這就像文言文沒有用標點符號斷句一樣。所以，就如同你看不懂沒有斷句的文言文，瀏覽器也看不懂沒有用空格分隔的英文。于是瀏覽器在處理時，就會把這一長串英文只是當成一個很長很長的單詞，只有一個單詞也就不會換行，因為默認的換行只會在單詞之間。
當一行放不下時，瀏覽器會嘗試把最后一個單詞放到下一行，如果下面這一整個空行還是放不下這個單詞，那么就會任由這個單詞超出容器，反正默認情況下瀏覽器是不會把單詞拆開的。
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
最后顯示時，就會把后面這個長單詞放到下一行，然后任由其超出容器：
word-break屬性從上面的兩點看到，瀏覽器已經在很努力的換行，從而盡量讓文字不要超出容器了。但即使是這樣，對于較小的容器中存放的長單詞，當整個一行還放不下一個單詞是，瀏覽器也是無能為力，畢竟瀏覽器要保證單詞的完整性，不敢隨隨便便把一個單詞給拆了。但是，word-break屬性就賦予了瀏覽器拆單詞的權力。
word-break:normal：這是默認值，也就是瀏覽器的默認行為
word-break:break-all：能把all都break掉，所有的東西都能拆，所以，單詞隨便拆
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
這樣瀏覽器在排版時，就完全可以把字母當成拆分單位，一個字母一個字母的往上放，放不下時就把字母放到下一行。可以理解成，此時就沒有單詞的概念了，只有字母。
![word-break:break-all]][3]
word-break:keep-all：上面在介紹瀏覽器的默認行為時，CJK字符和英文是分開，之所以這樣，是因為word-break屬性對于中英文的行為也是分開的。上面介紹的break-all值，主要也是針對英文的，漢字還是按照瀏覽器的默認行為，裝不下就換行。對于中文來說，沒有拆分不拆分，只有換行不換行。keep-all就是讓中文不要換行，此時英文還是按照瀏覽器的默認行為來。
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword 這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文
注意這里我在中英文之間加了個空格，否則瀏覽器會把后面的中文頁當成是英文單詞的一部分。最后顯示時，英文還是按照默認行為，中文變成了不換行。
word-break:break-word：在MDN上，只會介紹前面三個屬性，因為只有前三個才是標準的，而break-word是非標準的。如果一定要使用這個值，就需要注意下瀏覽器的兼容性，其最后顯示的效果，跟下面介紹的word-wrap:break-word基本一致，這里不再多說，看下面吧。
word-wrap屬性word-break:break-all在拆英文單詞時，細看一下，當longlonglon...longword這個單詞在第一行末尾放不下時，其實是分了兩步：
以字母為單位處理，盡量將這個長單詞的字母往第一行放，能放多少放多少
后面連單個字母都放不下時，再換行，放其他字母。
而word-wrap:break-word則不同，他會首先直接換行，放單詞，第二行放不下，再拆單詞
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
與上面的word-break:break-all的圖對比一下就明白了，拆單詞也是拆單詞，只不過我先換到下一行再拆。
另一個屬性值是word-wrap:normal，這就是默認值，對應瀏覽器的默認行為。
word-break與word-wrap很容易弄混，所以在CSS3中，word-wrap已經改成了overflow-wrap，不過考慮兼容性，還是用word-wrap的比較多。
總結一下word-break:break-all與word-wrap:break-word這兩個屬性，都是考慮拆英文長單詞的，但是拆分的方法有點不一樣。另外word-break:keep-all還可以控制中文。其實想想，還是中文的事少，沒有拆分的顧慮，只用考慮換行不換行就可以了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116373.html
摘要：一個長單詞超出整個容器寬度時是否換行必須注意到，這是一個長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。規定如何處理內容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談談其中最復雜的部分——文本格式。 處理換行、空格和Tab：white-space 眾所周知，...
摘要：理解和的區別從易于區分和理解的角度，我引用了無雙在你真的了解和的區別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...
摘要：文本換行其實是個非常常用但并不起眼的特性。在中日韓文情況下，和有區別，見下圖中日韓文情況下，仍舊等于沒有設，瀏覽器選擇在文字或標點符號處換行。但設成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據半角空格或標點來換行。 文本換行其實是個非常常用但并不起眼的特性。你什么都不用設，瀏覽器自動就會換行。例如英語，瀏覽器會根據容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇...
閱讀 1391·2023-04-26 03:04
閱讀 2325·2019-08-30 15:44
閱讀 3727·2019-08-30 14:15
閱讀 3507·2019-08-27 10:56
閱讀 2701·2019-08-26 13:53
閱讀 2616·2019-08-26 13:26
閱讀 3074·2019-08-26 12:11
閱讀 3608·2019-08-23 18:21
