簡單理解 word-wrap、word-break 和 white-space 的區(qū)別

spacewander 發(fā)布于2019-08-30 15:54 / 2728人閱讀

摘要：文本不會換行，文本會在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。保留空白符序列，但是正常地進(jìn)行換行。合并空白符序列，但是保留換行符。規(guī)定應(yīng)該從父元素繼承屬性的值。參考文章你真的了解和的區(qū)別嗎和區(qū)別

不設(shè)置word-warp和word-break的時候，一行單詞，超過了容器的寬度是，會將最后一個單詞下移一行進(jìn)行顯示，如果下移的那個單詞長度還是超過了容器寬度，則會溢出

word-wrap

設(shè)置word-wrap: break-word時，先把長單詞移動到下一行，然后如果還是超出容器寬度，則進(jìn)行單詞內(nèi)的斷句換行

后面的單詞同上述規(guī)則

word-break

當(dāng)上述情況，長單詞移動到下一行的時候，第一行會有一定空余的空間，較為浪費(fèi)資源。
于是通過設(shè)置word-break: break-all，長單詞不移動到下一行，直接在當(dāng)前行進(jìn)行斷句換行

white-space

作用于空格和回車，用于控制空格是否合并、回車是否可折行、句子太長是否在空格處折行

常用取值不同的作用：

normal: 默認(rèn)?？瞻讜粸g覽器忽略。

pre: 空白會被瀏覽器保留。其行為方式類似 HTML 中的

標(biāo)簽。
nowrap: 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到
標(biāo)簽為止。
pre-wrap: 保留空白符序列，但是正常地進(jìn)行換行。
pre-line: 合并空白符序列，但是保留換行符。
inherit: 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。

參考文章
你真的了解word-wrap和word-break的區(qū)別嗎？
white-space、word-wrap和word-break區(qū)別

GPU云服務(wù)器云服務(wù)器云計(jì)算和大數(shù)據(jù)的理解簡單理解超融合架構(gòu) 寬帶和專線的區(qū)別專線和寬帶的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116879.html

相關(guān)文章

white-space、word-wrap和word-break的簡單整理

摘要：理解和的區(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-space wh...

Magicer 2019-08-30 15:52 評論0 收藏0
CSS 文本控制

摘要：學(xué)習(xí)一些文本控制的屬性，防止做傻事。是的升級版，當(dāng)單行文本過長，超過文本邊界時自動換行。否則，文本仍然左對齊。 one more time one more chance. 一歩重頭學(xué)前端, css入門。學(xué)習(xí)一些 CSS 文本控制的屬性，防止做傻事。請大家對照下面列表檢驗(yàn)下：會的、不會的、似懂非懂的。筆者是一個也不會。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 評論0 收藏0
圖解CSS3讀書筆記文本與顏色

摘要：將內(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...

lvzishen 2019-08-28 18:26 評論0 收藏0
CSS基礎(chǔ)篇--強(qiáng)制性換行word-break與word-wrap的使用

摘要：，例子與上面一樣，但區(qū)別就是它會把整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。代碼結(jié)果如圖所示這樣就一目了然了。如果您覺得本文對您的學(xué)習(xí)有所幫助，請多支持與鼓勵。一般情況下，元素?fù)碛心J(rèn)的white-space:normal（自動換行，不換行是white-space:nowrap）,當(dāng)錄入的文字超過定義的寬度后會自動換行...

happyfish 2019-08-28 18:15 評論0 收藏0
CSS3 文本換行

摘要：文本換行其實(shí)是個非常常用但并不起眼的特性。在中日韓文情況下，和有區(qū)別，見下圖中日韓文情況下，仍舊等于沒有設(shè)，瀏覽器選擇在文字或標(biāo)點(diǎn)符號處換行。但設(shè)成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據(jù)半角空格或標(biāo)點(diǎn)來換行。文本換行其實(shí)是個非常常用但并不起眼的特性。你什么都不用設(shè)，瀏覽器自動就會換行。例如英語，瀏覽器會根據(jù)容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇...

EasonTyler 2019-08-30 13:16 評論0 收藏0