資訊專欄INFORMATION COLUMN
摘要：有兩個屬性我一直在混淆著其意義，今天一并整理掉。把折行也看成是一種非保留所有的空格和回車，但是允許折行。僅僅保留回車，會合并空格，且允許折行而正是默認有如下的元素篇首的幾個問題，就當是習題好了。
有兩個CSS屬性我一直在混淆著其意義，今天一并整理掉。
white-space和word-wrap通常用來解決如下問題：
字符串太長，但又不想讓其換行，強制其在一行中（如顯示代碼），如何實現(xiàn)?
單詞太長，但如果不折行的話會溢出，我希望它能多行顯示。
為什么我明明打了10個空格，可顯示出來的只有一個?
為什么我明明敲了10個回車，瀏覽器卻完全不顯示?
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會在正文壓縮圖片，點擊圖片可看原圖)
word-wrap能取如下值：
normal | break-word
以下兩個示例抄自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap）
normal: 單詞超長也不可折行，產(chǎn)生溢出:
p { width: 13em; background: gold; }
效果：
break-word: 單詞超長會折行:
p { width: 13em; background: gold; word-wrap: break-word; }
效果：
white-space是作用于空格和回車上的，用于控制：
空格是否合并
回車是否解釋成折行
句子太長是否在有空格處折行
而word-wrap是作用在單詞上，用于控制超長單詞是否折行。
注意white-space有一堆pre開頭的值，pre到底是什么意思呢？
通常嘛pre是prefix的縮寫，不過這可解釋不通啊。在html里也有一個的標簽，它們之間有什么聯(lián)系呢?
其實它們都是preserve（保留）的縮寫啦。于是我們可以這么理解：
pre: 保留(preserve)所有的空格和回車，且不允許折行。（把折行也看成是一種非preserve）
pre-wrap: 保留(preserve)所有的空格和回車，但是允許折行(wrap)。
pre-line: 僅僅保留(preserve)回車(line)，會合并空格，且允許折行
而正是默認有如下CSS的元素：
pre {
display: block;
white-space: pre;
}
篇首的幾個問題，就當是習題好了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110833.html
摘要：一個長單詞超出整個容器寬度時是否換行必須注意到，這是一個長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。規(guī)定如何處理內(nèi)容溢出容器屬性作用于型元素上。 前言 文本方面的CSS內(nèi)容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談?wù)勂渲凶顝?fù)雜的部分——文本格式。 處理換行、空格和Tab：white-space 眾所周知，...
摘要：理解和的區(qū)別從易于區(qū)分和理解的角度，我引用了無雙在你真的了解和的區(qū)別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...
摘要：文本不會換行，文本會在在同一行上繼續(xù)，直到遇到標簽為止。保留空白符序列，但是正常地進行換行。合并空白符序列，但是保留換行符。規(guī)定應(yīng)該從父元素繼承屬性的值。參考文章你真的了解和的區(qū)別嗎和區(qū)別 不設(shè)置word-warp和word-break的時候，一行單詞，超過了容器的寬度是，會將最后一個單詞下移一行進行顯示，如果下移的那個單詞長度還是超過了容器寬度，則會溢出 word-wrap 設(shè)置wo...
摘要：將內(nèi)容在邊界內(nèi)換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內(nèi)換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...
閱讀 953·2023-04-26 01:34
閱讀 3389·2023-04-25 20:58
閱讀 3423·2021-11-08 13:22
閱讀 2144·2019-08-30 14:17
閱讀 2551·2019-08-29 15:27
閱讀 2706·2019-08-29 12:45
閱讀 3040·2019-08-29 12:26
閱讀 2843·2019-08-28 17:51
