資訊專欄INFORMATION COLUMN
摘要：有兩個(gè)屬性我一直在混淆著其意義，今天一并整理掉。把折行也看成是一種非保留所有的空格和回車，但是允許折行。僅僅保留回車，會(huì)合并空格，且允許折行而正是默認(rèn)有如下的元素篇首的幾個(gè)問題，就當(dāng)是習(xí)題好了。
有兩個(gè)CSS屬性我一直在混淆著其意義，今天一并整理掉。
white-space和word-wrap通常用來解決如下問題：
字符串太長，但又不想讓其換行，強(qiáng)制其在一行中（如顯示代碼），如何實(shí)現(xiàn)?
單詞太長，但如果不折行的話會(huì)溢出，我希望它能多行顯示。
為什么我明明打了10個(gè)空格，可顯示出來的只有一個(gè)?
為什么我明明敲了10個(gè)回車，瀏覽器卻完全不顯示?
white-spacewhite-space可以取如下的值：
normal | nowrap | pre | pre-wrap | pre-line
關(guān)于解釋，看圖比較直接。
以下截圖均由如下代碼模板得到：
hello world my name is ssnau, i am living in the beauuuuuutiful hangzhou city
word-wrap注：segmentfault會(huì)在正文壓縮圖片，點(diǎn)擊圖片可看原圖)
word-wrap能取如下值：
normal | break-word
以下兩個(gè)示例抄自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap）
normal: 單詞超長也不可折行，產(chǎn)生溢出:
p { width: 13em; background: gold; }
效果：
break-word: 單詞超長會(huì)折行:
p { width: 13em; background: gold; word-wrap: break-word; }
效果：
white-space是作用于空格和回車上的，用于控制：
空格是否合并
回車是否解釋成折行
句子太長是否在有空格處折行
而word-wrap是作用在單詞上，用于控制超長單詞是否折行。
注意white-space有一堆pre開頭的值，pre到底是什么意思呢？
通常嘛pre是prefix的縮寫，不過這可解釋不通啊。在html里也有一個(gè)的標(biāo)簽，它們之間有什么聯(lián)系呢?
其實(shí)它們都是preserve（保留）的縮寫啦。于是我們可以這么理解：
pre: 保留(preserve)所有的空格和回車，且不允許折行。（把折行也看成是一種非preserve）
pre-wrap: 保留(preserve)所有的空格和回車，但是允許折行(wrap)。
pre-line: 僅僅保留(preserve)回車(line)，會(huì)合并空格，且允許折行
而正是默認(rèn)有如下CSS的元素：
pre {
display: block;
white-space: pre;
}
篇首的幾個(gè)問題，就當(dāng)是習(xí)題好了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110833.html
摘要：一個(gè)長單詞超出整個(gè)容器寬度時(shí)是否換行必須注意到，這是一個(gè)長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。規(guī)定如何處理內(nèi)容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內(nèi)容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談?wù)勂渲凶顝?fù)雜的部分——文本格式。 處理換行、空格和Tab：white-space 眾所周知，...
摘要：理解和的區(qū)別從易于區(qū)分和理解的角度，我引用了無雙在你真的了解和的區(qū)別嗎一文中對(duì)兩個(gè)屬性作用的解釋屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個(gè)css屬性，屬性說明請(qǐng)點(diǎn)擊鏈接查看參考手冊(cè)。 white-space wh...
摘要：學(xué)習(xí)一些文本控制的屬性，防止做傻事。是的升級(jí)版，當(dāng)單行文本過長，超過文本邊界時(shí)自動(dòng)換行。否則，文本仍然左對(duì)齊。 one more time one more chance. 一歩重頭學(xué)前端, css入門。 學(xué)習(xí)一些 CSS 文本控制的屬性，防止做傻事。請(qǐng)大家對(duì)照下面列表檢驗(yàn)下： 會(huì)的、不會(huì)的、似懂非懂的。筆者是一個(gè)也不會(huì)。 white-space text-overflow: ell...
摘要：文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。保留空白符序列，但是正常地進(jìn)行換行。合并空白符序列，但是保留換行符。規(guī)定應(yīng)該從父元素繼承屬性的值。參考文章你真的了解和的區(qū)別嗎和區(qū)別 不設(shè)置word-warp和word-break的時(shí)候，一行單詞，超過了容器的寬度是，會(huì)將最后一個(gè)單詞下移一行進(jìn)行顯示，如果下移的那個(gè)單詞長度還是超過了容器寬度，則會(huì)溢出 word-wrap 設(shè)置wo...
摘要：將內(nèi)容在邊界內(nèi)換行不截?cái)嘤⑽膯卧~換行語法瀏覽器只在半角空格或連字符的地方進(jìn)行換行。個(gè)人感覺跟類似強(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...
閱讀 983·2023-04-26 01:34
閱讀 3430·2023-04-25 20:58
閱讀 3602·2021-11-08 13:22
閱讀 2168·2019-08-30 14:17
閱讀 2575·2019-08-29 15:27
閱讀 2737·2019-08-29 12:45
閱讀 3103·2019-08-29 12:26
閱讀 2871·2019-08-28 17:51
