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

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

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

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

word-wrap

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

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

word-break

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

white-space

作用于空格和回車(chē)，用于控制空格是否合并、回車(chē)是否可折行、句子太長(zhǎng)是否在空格處折行

常用取值不同的作用：

normal: 默認(rèn)。空白會(huì)被瀏覽器忽略。

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

標(biāo)簽。
nowrap: 文本不會(huì)換行，文本會(huì)在在同一行上繼續(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ù)的理解簡(jiǎn)單理解超融合架構(gòu) 寬帶和專線的區(qū)別專線和寬帶的區(qū)別

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116879.html

相關(guān)文章

white-space、word-wrap和word-break的簡(jiǎn)單整理

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

Magicer 2019-08-30 15:52 評(píng)論0 收藏0
CSS 文本控制

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

Taonce 2019-08-29 15:42 評(píng)論0 收藏0
圖解CSS3讀書(shū)筆記文本與顏色

摘要：將內(nèi)容在邊界內(nèi)換行不截?cái)嘤⑽膯卧~換行語(yǔ)法瀏覽器只在半角空格或連字符的地方進(jìn)行換行。個(gè)人感覺(jué)跟類似強(qiáng)行截?cái)嘤⑽膯卧~，達(dá)到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強(qiáng)制對(duì)文本使用同一尺寸,僅火狐支持), font...

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

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

happyfish 2019-08-28 18:15 評(píng)論0 收藏0
CSS3 文本換行

摘要：文本換行其實(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ì)選擇...

EasonTyler 2019-08-30 13:16 評(píng)論0 收藏0