資訊專(zhuān)欄INFORMATION COLUMN
摘要：到文本過(guò)長(zhǎng)的問(wèn)題，元素的寬度不足以容那文本的內(nèi)容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我將會(huì)介紹幾種種常用的換行方法。但文本內(nèi)的換行無(wú)效。
到文本過(guò)長(zhǎng)的問(wèn)題，元素的寬度不足以容那文本的內(nèi)容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我將會(huì)介紹幾種css種常用的換行方法。
word-break相信這個(gè)屬性大家都不陌生，在介紹這個(gè)屬性之前先介紹一個(gè)縮寫(xiě)CJK:中日韓統(tǒng)一表意文字，在下面的介紹中將會(huì)用到這個(gè)名詞，讓我們先來(lái)簡(jiǎn)單介紹一下word-break的幾個(gè)屬性：
normal:使用默認(rèn)斷行規(guī)則
break-all:對(duì)于非CJK文本，可在任意字符間斷行
keep-all:CJK文本不斷行，非CJK文本表現(xiàn)同normal一樣
下面我們來(lái)看幾個(gè)例子：
abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試test test Strawberry test test test test test test test test
div {
width: 100px;
word-break: normal;
}
當(dāng)word-break為normal時(shí)，即使用默認(rèn)規(guī)則時(shí)可以看到CJK文本會(huì)自動(dòng)行，非CJK文本不會(huì)自動(dòng)換行，會(huì)超出容器，但是在查找到空格這類(lèi)可以作為換行依據(jù)的內(nèi)容時(shí)，非CJK內(nèi)容也能實(shí)現(xiàn)換行
div {
width: 100px;
word-break: break-all;
}
從上面可以看到：break-all屬性很霸道，只要容器裝不下了，就會(huì)立即換行，不管是CJK內(nèi)容還是非CJK內(nèi)容，也可以理解為break-all將非CJK內(nèi)容作為CJK處理
div {
width: 100px;
word-break: keep-all;
}
從上面可以看到：keep-all屬性恰好和break-all相反，將CJK內(nèi)容當(dāng)成非CJK內(nèi)容處理
overflow-wrap有可能有人看到這個(gè)屬性有點(diǎn)陌生，但是我一說(shuō)word-wrap大家一定不陌生，其實(shí)它就是word-wrap換了個(gè)名字而已，屬性值一摸一樣，下面就來(lái)介紹一下它的屬性值：
normal：表示在正常的單詞結(jié)束處換行
break-word：表示如果行內(nèi)沒(méi)有多余的地方容納該單詞到結(jié)尾，則那些正常的不能被分割的單詞會(huì)被強(qiáng)制分割換行
讓我們來(lái)看個(gè)例子：
div {
width: 100px;
overflow-wrap: break-word;
}
從上面例子可以看到：當(dāng)屬性值為break-word時(shí)，當(dāng)?shù)竭_(dá)容器邊界時(shí)，如果單詞還沒(méi)有結(jié)束，也會(huì)自動(dòng)換行，如果找到空格明確單詞結(jié)束時(shí)，就會(huì)判斷當(dāng)前行剩余寬度是否還能容納下一個(gè)單詞，如果不行就會(huì)執(zhí)行換行，以避免單詞溢出
white-space這個(gè)屬性在文本超出顯示省略號(hào)的時(shí)候大家一定用過(guò)，下面就來(lái)看一下這個(gè)屬性的屬性值：
normal：連續(xù)的空白符會(huì)被合并，換行符會(huì)被當(dāng)作空白符處理。填充line盒子時(shí)，必要的話(huà)會(huì)換行。
nowrap：和normal一樣，連續(xù)的空白符會(huì)被合并。但文本內(nèi)的換行無(wú)效。
pre：連續(xù)的空白符會(huì)被保留。在遇到換行符或者
元素時(shí)才會(huì)換行。
pre-wrap：連續(xù)的空白符會(huì)被保留。在遇到換行符或者
元素，或者需要為了填充line盒子時(shí)才會(huì)換行。
pre-line：連續(xù)的空白符會(huì)被合并。在遇到換行符或者
元素，或者需要為了填充line盒子時(shí)會(huì)換行。
來(lái)看幾個(gè)具體的例子表現(xiàn)：
test test test test test test test test test test test
div {
width: 100px;
white-space: normal;
}
上面例子中，為了看出是否會(huì)合并空白符，特意在div前面加了兩個(gè)空格?？梢钥吹街禐閚ormal時(shí)，會(huì)合并連續(xù)空白符，并且會(huì)換行符作為空白符處理
div {
width: 100px;
white-space: nowrap;
}
nowrap屬性就和大家常見(jiàn)的一樣文本內(nèi)換行無(wú)效，但是會(huì)合并連續(xù)空白符
div {
width: 100px;
white-space: pre;
}
pre值可以看到，會(huì)保留連續(xù)空白符，且只有在遇到換行符的時(shí)候才會(huì)換行
div {
width: 100px;
white-space: pre-wrap;
}
pre-wrap值可以看到，會(huì)保留連續(xù)空白符，且在遇到換行符和需要換行的時(shí)候都會(huì)換行
div {
width: 100px;
white-space: pre-line;
}
pre-line值可以看到，會(huì)合并連續(xù)空白符，且在遇到換行符和需要換行的時(shí)候都會(huì)換行
line-break此屬性用于指定如何斷行
屬性值：auto | loose | normal | strict | anywhere
目前還是一個(gè)處在Working Draft的階段，w3c地址
在chrome中測(cè)試發(fā)現(xiàn)這幾個(gè)屬性值并未想官方闡述的那樣對(duì)文本產(chǎn)生換行的影響，需要持續(xù)關(guān)注未來(lái)的進(jìn)展
此屬性告訴瀏覽器在換行時(shí)使用連字符連接單詞
屬性值：none | manual | auto
來(lái)看具體例子：
abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsatest test Strawberry test test test test test test test test
div {
width: 100px;
hyphens: none;
}
當(dāng)屬性值為none時(shí)，只會(huì)在有空白符的地方換行
abashdgsgdjagdjasddnsad-vadfjasdgagdagsjdgasgdajsghsatest test Strawberry test test test test test test test test
div {
width: 100px;
hyphens: manual;
}
從例子中可以看出，當(dāng)屬性值為manual的時(shí)候，只有在空白符和連接符的時(shí)候會(huì)換行
abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsatest test Strawberry test test test test test test test test
div {
width: 100px;
hyphens: auto;
}
當(dāng)值為auto時(shí)，瀏覽器會(huì)自己去判斷可以在哪個(gè)位置斷行，然后自動(dòng)在斷行的位置加上連接符
目前hyphens屬性也處在Working Draft的階段，w3c地址，需要大家后續(xù)的持續(xù)關(guān)注
以上對(duì)css中的文本換行會(huì)用的一些屬性做了簡(jiǎn)單的總結(jié)，要想處理好文本換行的問(wèn)題，還需要花更多的精力去配合其他屬性的使用，需要更多的時(shí)間去探索，這也是css有趣的地方，不同的組合有不同的可能。
這篇文章如果有錯(cuò)誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評(píng)指正，如果喜歡，歡迎點(diǎn)贊收藏
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114208.html
摘要：文本換行其實(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ì)選擇...
摘要：文本換行其實(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ì)選擇...
摘要：在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，這個(gè)時(shí)候，就需要用對(duì)其進(jìn)行處理。再補(bǔ)充一條，比如想讓內(nèi)容在第二行的時(shí)候，超出部分隱藏這個(gè)處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見(jiàn)解說(shuō)二 在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實(shí)影響美觀，這個(gè)時(shí)候，就需要用css對(duì)其進(jìn)行處理。 下面的方法是我在實(shí)際工作中總結(jié)...
摘要：文本標(biāo)題元素注意在一個(gè)頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒(méi)用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過(guò)進(jìn)行修改每個(gè)標(biāo)題元素是獨(dú)占一行并且是垂直排列在實(shí)際開(kāi)發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個(gè)HTML頁(yè)面中最好只使用一個(gè)標(biāo)題 因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒(méi)用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...
摘要：文本標(biāo)題元素注意在一個(gè)頁(yè)面中最好只使用一個(gè)標(biāo)題因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒(méi)用示例代碼標(biāo)題元素元素默認(rèn)效果是顯示最大顯示最小默認(rèn)效果是由瀏覽器自帶樣式提供可以通過(guò)進(jìn)行修改每個(gè)標(biāo)題元素是獨(dú)占一行并且是垂直排列在實(shí)際開(kāi)發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個(gè)HTML頁(yè)面中最好只使用一個(gè)標(biāo)題 因?yàn)闉g覽器只會(huì)抓取一個(gè)多了沒(méi)用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...
閱讀 3875·2023-04-25 22:43
閱讀 3923·2021-09-06 15:15
閱讀 1416·2019-08-30 15:54
閱讀 3765·2019-08-30 14:20
閱讀 2976·2019-08-29 17:16
閱讀 3291·2019-08-29 15:28
閱讀 3468·2019-08-29 11:08
閱讀 1173·2019-08-28 18:05
