資訊專欄INFORMATION COLUMN
摘要：英文換行來(lái)到英文，情況就要復(fù)雜一些。在英文中有單詞的概念，所以在換行時(shí)就得考慮單詞的完整性。上面介紹的值，主要也是針對(duì)英文的，漢字還是按照瀏覽器的默認(rèn)行為，裝不下就換行。最后顯示時(shí)，英文還是按照默認(rèn)行為，中文變成了不換行。
上一篇博客中介紹white-space屬性時(shí)聊到了換行，這一篇介紹換行的細(xì)節(jié)。
瀏覽器的默認(rèn)行為瀏覽器的換行行為，對(duì)于中文和英文存在一些差別。
中文換行正如上一篇博客中所說(shuō)的，中文換行比較簡(jiǎn)單，這一行放不下就換行。除了中文之外，韓文和日文的處理也是一樣的。這三種文字合在一起就是MDN介紹word-break屬性時(shí)所說(shuō)的CJK（Chinese, Japanese, Korean的縮寫(xiě)）。
英文換行來(lái)到英文，情況就要復(fù)雜一些。在英文中有單詞的概念，所以在換行時(shí)就得考慮單詞的完整性。
瀏覽器按照空格來(lái)識(shí)別單詞，默認(rèn)情況下，瀏覽器不會(huì)在單詞內(nèi)換行
thisisalonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
我們?cè)趐標(biāo)簽內(nèi)部放了一些英文字母，這些字母之間并沒(méi)有用空格來(lái)分隔開(kāi)來(lái)，這就像文言文沒(méi)有用標(biāo)點(diǎn)符號(hào)斷句一樣。所以，就如同你看不懂沒(méi)有斷句的文言文，瀏覽器也看不懂沒(méi)有用空格分隔的英文。于是瀏覽器在處理時(shí)，就會(huì)把這一長(zhǎng)串英文只是當(dāng)成一個(gè)很長(zhǎng)很長(zhǎng)的單詞，只有一個(gè)單詞也就不會(huì)換行，因?yàn)槟J(rèn)的換行只會(huì)在單詞之間。
當(dāng)一行放不下時(shí)，瀏覽器會(huì)嘗試把最后一個(gè)單詞放到下一行，如果下面這一整個(gè)空行還是放不下這個(gè)單詞，那么就會(huì)任由這個(gè)單詞超出容器，反正默認(rèn)情況下瀏覽器是不會(huì)把單詞拆開(kāi)的。
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
最后顯示時(shí)，就會(huì)把后面這個(gè)長(zhǎng)單詞放到下一行，然后任由其超出容器：
word-break屬性從上面的兩點(diǎn)看到，瀏覽器已經(jīng)在很努力的換行，從而盡量讓文字不要超出容器了。但即使是這樣，對(duì)于較小的容器中存放的長(zhǎng)單詞，當(dāng)整個(gè)一行還放不下一個(gè)單詞是，瀏覽器也是無(wú)能為力，畢竟瀏覽器要保證單詞的完整性，不敢隨隨便便把一個(gè)單詞給拆了。但是，word-break屬性就賦予了瀏覽器拆單詞的權(quán)力。
word-break:normal：這是默認(rèn)值，也就是瀏覽器的默認(rèn)行為
word-break:break-all：能把a(bǔ)ll都break掉，所有的東西都能拆，所以，單詞隨便拆
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
這樣瀏覽器在排版時(shí)，就完全可以把字母當(dāng)成拆分單位，一個(gè)字母一個(gè)字母的往上放，放不下時(shí)就把字母放到下一行。可以理解成，此時(shí)就沒(méi)有單詞的概念了，只有字母。
![word-break:break-all]][3]
word-break:keep-all：上面在介紹瀏覽器的默認(rèn)行為時(shí)，CJK字符和英文是分開(kāi)，之所以這樣，是因?yàn)?b>word-break屬性對(duì)于中英文的行為也是分開(kāi)的。上面介紹的break-all值，主要也是針對(duì)英文的，漢字還是按照瀏覽器的默認(rèn)行為，裝不下就換行。對(duì)于中文來(lái)說(shuō)，沒(méi)有拆分不拆分，只有換行不換行。keep-all就是讓中文不要換行，此時(shí)英文還是按照瀏覽器的默認(rèn)行為來(lái)。
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword 這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文這是中文這是中文是中文這是中文
注意這里我在中英文之間加了個(gè)空格，否則瀏覽器會(huì)把后面的中文頁(yè)當(dāng)成是英文單詞的一部分。最后顯示時(shí)，英文還是按照默認(rèn)行為，中文變成了不換行。
word-break:break-word：在MDN上，只會(huì)介紹前面三個(gè)屬性，因?yàn)橹挥星叭齻€(gè)才是標(biāo)準(zhǔn)的，而break-word是非標(biāo)準(zhǔn)的。如果一定要使用這個(gè)值，就需要注意下瀏覽器的兼容性，其最后顯示的效果，跟下面介紹的word-wrap:break-word基本一致，這里不再多說(shuō)，看下面吧。
word-wrap屬性word-break:break-all在拆英文單詞時(shí)，細(xì)看一下，當(dāng)longlonglon...longword這個(gè)單詞在第一行末尾放不下時(shí)，其實(shí)是分了兩步：
以字母為單位處理，盡量將這個(gè)長(zhǎng)單詞的字母往第一行放，能放多少放多少
后面連單個(gè)字母都放不下時(shí)，再換行，放其他字母。
而word-wrap:break-word則不同，他會(huì)首先直接換行，放單詞，第二行放不下，再拆單詞
this is a longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglongword
與上面的word-break:break-all的圖對(duì)比一下就明白了，拆單詞也是拆單詞，只不過(guò)我先換到下一行再拆。
另一個(gè)屬性值是word-wrap:normal，這就是默認(rèn)值，對(duì)應(yīng)瀏覽器的默認(rèn)行為。
word-break與word-wrap很容易弄混，所以在CSS3中，word-wrap已經(jīng)改成了overflow-wrap，不過(guò)考慮兼容性，還是用word-wrap的比較多。
總結(jié)一下word-break:break-all與word-wrap:break-word這兩個(gè)屬性，都是考慮拆英文長(zhǎng)單詞的，但是拆分的方法有點(diǎn)不一樣。另外word-break:keep-all還可以控制中文。其實(shí)想想，還是中文的事少，沒(méi)有拆分的顧慮，只用考慮換行不換行就可以了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116373.html
摘要：一個(gè)長(zhǎng)單詞超出整個(gè)容器寬度時(shí)是否換行必須注意到，這是一個(gè)長(zhǎng)單詞便超出容器寬度的情況，而且只需考慮英文，中文沒(méi)有此特性。規(guī)定如何處理內(nèi)容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內(nèi)容不少，但只要是用過(guò)一下office word來(lái)編輯過(guò)文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來(lái)談?wù)勂渲凶顝?fù)雜的部分——文本格式。 處理?yè)Q行、空格和Tab：white-space 眾所周知，...
摘要：學(xué)習(xí)一些文本控制的屬性，防止做傻事。是的升級(jí)版，當(dāng)單行文本過(guò)長(zhǎng)，超過(guò)文本邊界時(shí)自動(dòng)換行。否則，文本仍然左對(duì)齊。 one more time one more chance. 一歩重頭學(xué)前端, css入門。 學(xué)習(xí)一些 CSS 文本控制的屬性，防止做傻事。請(qǐng)大家對(duì)照下面列表檢驗(yàn)下： 會(huì)的、不會(huì)的、似懂非懂的。筆者是一個(gè)也不會(huì)。 white-space text-overflow: ell...
摘要：理解和的區(qū)別從易于區(qū)分和理解的角度，我引用了無(wú)雙在你真的了解和的區(qū)別嗎一文中對(duì)兩個(gè)屬性作用的解釋屬性用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個(gè)css屬性，屬性說(shuō)明請(qǐng)點(diǎn)擊鏈接查看參考手冊(cè)。 white-space wh...
摘要：文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。在中日韓文情況下，和有區(qū)別，見(jiàn)下圖中日韓文情況下，仍舊等于沒(méi)有設(shè)，瀏覽器選擇在文字或標(biāo)點(diǎn)符號(hào)處換行。但設(shè)成后，將不再允許斷詞哪怕是中日韓文，只能像英語(yǔ)系一樣根據(jù)半角空格或標(biāo)點(diǎn)來(lái)?yè)Q行。 文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。你什么都不用設(shè)，瀏覽器自動(dòng)就會(huì)換行。例如英語(yǔ)，瀏覽器會(huì)根據(jù)容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會(huì)選擇...
閱讀 1665·2023-04-26 03:04
閱讀 2586·2019-08-30 15:44
閱讀 3797·2019-08-30 14:15
閱讀 3647·2019-08-27 10:56
閱讀 2981·2019-08-26 13:53
閱讀 2676·2019-08-26 13:26
閱讀 3134·2019-08-26 12:11
閱讀 3688·2019-08-23 18:21
