摘要:理解和的區(qū)別從易于區(qū)分和理解的角度,我引用了無雙在你真的了解和的區(qū)別嗎一文中對兩個屬性作用的解釋屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句,這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點(diǎn)時產(chǎn)生溢出現(xiàn)象。
white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性,屬性說明請點(diǎn)擊鏈接查看參考手冊。
white-spacewhite-space屬性定義了如何處理文本中的空白;具體到細(xì)節(jié),主要決定決定了如何處理元素內(nèi)文本中空白符、換行符、是否允許過長行折行;
其中,過長行是指那些單行內(nèi)容寬度超出了容器寬度的行,以下列代碼為例:
ABCDEFGHIJKOMN
/*css*/ p{width:4em;}
內(nèi)容行ABCDEFGHIJKOMN渲染寬度為7em,超過所在容器的指定寬度,那么它屬于過長行。
white-space屬性各可能值的對比white-space默認(rèn)值為normal,可選值包括pre、nowrap、pre-wrap、pre-line。
可選值各維度對比下表對比分析了white-space各值在處理空白符、換行符、折行與否時的不同策略。
值 | 概述 | 空白符 | 換行符 | 過長行是否折行 |
---|---|---|---|---|
normal | 合并連續(xù)的空白符、換行符為一個空白符;折行; | 連續(xù)的多個空白符合并成一個; | 換行符被當(dāng)做空白符處理,一同合并; | 折行(說明1) |
pre | 完全保留代碼中格式;不折行; | 所有空白符保留; | 所有換行符保留; | 不折行(說明2) |
nowrap | 合并連續(xù)的空白符、換行符為一個空白符;不折行; | 連續(xù)的多個空白符合并成一個; | 換行符被當(dāng)做空白符處理,一同合并; | 不折行(說明2) |
pre-wrap | 保留所有空白符、換行符;折行; | 所有空白符保留; | 所有換行符保留; | 折行(說明1) |
pre-line | 空白符合并;換行符保留;折行; | 連續(xù)的多個空白符合并成一個; | 所有換行符保留; | 折行(說明1) |
說明1:折行( CJK遇到容器邊界自動換行;非CJK由word-wrap和word-break的值決定。)
說明2:不折行(行內(nèi)容寬度超出容器寬度時的表現(xiàn)由overflow屬性決定;word-wrap和word-break設(shè)置為任何值都不影響表現(xiàn)。)
1.如下方代碼(圖1)及相應(yīng)效果圖(圖2)所示,段落中的換行效果可能來源于兩種不同的原因。一種是段落中保留的換行符;另一種情況是過長行的折行效果。
前者在所屬容器寬度改變時,仍然是多帶帶一行;后者在所屬容器改變時可能合并到其余行中。
white-space值為normal、pre-wrap、pre-line時,過長行遇到容器邊界時會觸發(fā)折行現(xiàn)象。white-space決定了過長行是否發(fā)生折行,而 word-wrap和word-break用于決定如何進(jìn)行折行。
理解word-wrap和word-break的區(qū)別從易于區(qū)分和理解的角度,我引用了“無雙”在你真的了解word-wrap和word-break的區(qū)別嗎?一文中對兩個css屬性作用的解釋:
word-wrap
word-wrap 屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句,這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點(diǎn)時產(chǎn)生溢出現(xiàn)象。
word-break
word-break 屬性用來標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句。
關(guān)于word-wrap和word-break,我們主要關(guān)注word-wrap:break-word和word-break:break-all的區(qū)別:
word-wrap先嘗試尋找空格、連接符等正常換行點(diǎn),如果正常換行能滿足不超出容器寬度的需求,正常換行;如果正常換行后仍然超出容器寬度,對非CJK長內(nèi)容進(jìn)行強(qiáng)制換行。
word-break:break:all直接強(qiáng)制在行末尾換行。
詳細(xì)論述和驗(yàn)證建議參考張鑫旭大神的word-break:break-all和word-wrap:break-word的區(qū)別 和 無雙的你真的了解word-wrap和word-break的區(qū)別嗎?,兩篇文章闡述都清晰明了,此處不班門弄斧;引出基本的概念和理解主要為了引出后續(xù)的組合引用效果表格。
word-wrap和word-break的組合引用效果word-wrap默認(rèn)值normal,可選值break-word;
word-break默認(rèn)值normal,可選值為break-all,keep-all。非CJK文本下,keep-all和normal的表現(xiàn)是一致的。
下表列出了word-wrap和word-break的組合使用效果。
組合 | 效果 |
---|---|
word-wrap:normal; word-break:normal; | 遵循默認(rèn)規(guī)則折行; 如沒有-和空白符,不折行(說明1); |
word-wrap:normal; word-break:break-all; | 內(nèi)容遇到容器末尾強(qiáng)制執(zhí)行換行; |
word-wrap:break-word; word-break:normal; | 優(yōu)先嘗試正常折行; 正常折行后仍然過長的,強(qiáng)制在遇到容器末尾時換行; |
word-wrap:break-word; word-break:break-all; | 內(nèi)容遇到容器末尾強(qiáng)制執(zhí)行換行(非末行均占滿容器寬度); (不優(yōu)先嘗試-和空白符等折行規(guī)則) |
說明1:超出容器寬度后的效果優(yōu)overflow屬性決定。
End文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/116448.html
摘要:文本不會換行,文本會在在同一行上繼續(xù),直到遇到標(biāo)簽為止。保留空白符序列,但是正常地進(jìn)行換行。合并空白符序列,但是保留換行符。規(guī)定應(yīng)該從父元素繼承屬性的值。參考文章你真的了解和的區(qū)別嗎和區(qū)別 不設(shè)置word-warp和word-break的時候,一行單詞,超過了容器的寬度是,會將最后一個單詞下移一行進(jìn)行顯示,如果下移的那個單詞長度還是超過了容器寬度,則會溢出 word-wrap 設(shè)置wo...
摘要:將內(nèi)容在邊界內(nèi)換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進(jìn)行換行。個人感覺跟類似強(qiáng)行截斷英文單詞,達(dá)到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強(qiáng)制對文本使用同一尺寸,僅火狐支持), font...
摘要:為了實(shí)現(xiàn)文字環(huán)繞效果,規(guī)范規(guī)定的措施是使父容器塌陷,元素脫離文檔流浮動產(chǎn)生,元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個兄弟節(jié)點(diǎn) A...
摘要:瀏覽器默認(rèn)換行規(guī)則空格,回車,制表符,全部合成一個空格,文本自動換行只在半角空格,連字符處換行參考鏈接多行文本溢出省略顯示實(shí)現(xiàn)單行多行文本超出顯示省略號 瀏覽器默認(rèn)換行規(guī)則:空格,回車,制表符,全部合成一個空格,文本自動換行(只在半角空格,連字符處換行) showImg(https://segmentfault.com/img/bVbrhiA?w=685&h=106); 參考鏈接:ht...
閱讀 2584·2021-11-24 09:38
閱讀 2615·2019-08-30 15:54
閱讀 930·2019-08-30 15:52
閱讀 1917·2019-08-30 15:44
閱讀 2724·2019-08-30 13:48
閱讀 777·2019-08-29 16:21
閱讀 1006·2019-08-29 14:03
閱讀 2223·2019-08-28 18:15