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