談談white-space和word-wrap

Shihira 發布于2019-08-28 17:51 / 2810人閱讀

摘要：有兩個屬性我一直在混淆著其意義，今天一并整理掉。把折行也看成是一種非保留所有的空格和回車，但是允許折行。僅僅保留回車，會合并空格，且允許折行而正是默認有如下的元素篇首的幾個問題，就當是習題好了。

有兩個CSS屬性我一直在混淆著其意義，今天一并整理掉。

white-space和word-wrap通常用來解決如下問題：

字符串太長，但又不想讓其換行，強制其在一行中（如顯示代碼），如何實現?

單詞太長，但如果不折行的話會溢出，我希望它能多行顯示。

為什么我明明打了10個空格，可顯示出來的只有一個?

為什么我明明敲了10個回車，瀏覽器卻完全不顯示?

white-space

white-space可以取如下的值：

normal | nowrap | pre | pre-wrap | pre-line

關于解釋，看圖比較直接。

以下截圖均由如下代碼模板得到：


  hello                    world


  my name


    is ssnau, i am living in the beauuuuuutiful hangzhou city

注：segmentfault會在正文壓縮圖片，點擊圖片可看原圖)

word-wrap

word-wrap能取如下值：

normal | break-word

以下兩個示例抄自MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap）

normal: 單詞超長也不可折行，產生溢出:

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里也有一個

的標簽，它們之間有什么聯系呢?
其實它們都是preserve（保留）的縮寫啦。于是我們可以這么理解：

pre: 保留(preserve)所有的空格和回車，且不允許折行。（把折行也看成是一種非preserve）

pre-wrap: 保留(preserve)所有的空格和回車，但是允許折行(wrap)。

pre-line: 僅僅保留(preserve)回車(line)，會合并空格，且允許折行

而

正是默認有如下CSS的元素：

pre {
    display: block;
    white-space: pre;
}

篇首的幾個問題，就當是習題好了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110833.html

談談如何用CSS處理文本格式

摘要：一個長單詞超出整個容器寬度時是否換行必須注意到，這是一個長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。規定如何處理內容溢出容器屬性作用于型元素上。前言文本方面的CSS內容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談談其中最復雜的部分——文本格式。處理換行、空格和Tab：white-space 眾所周知，...

source 2019-08-28 18:28 評論0 收藏0
white-space、word-wrap和word-break的簡單整理

摘要：理解和的區別從易于區分和理解的角度，我引用了無雙在你真的了解和的區別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...

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

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

Taonce 2019-08-29 15:42 評論0 收藏0
簡單理解 word-wrap、word-break 和 white-space 的區別

摘要：文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。保留空白符序列，但是正常地進行換行。合并空白符序列，但是保留換行符。規定應該從父元素繼承屬性的值。參考文章你真的了解和的區別嗎和區別不設置word-warp和word-break的時候，一行單詞，超過了容器的寬度是，會將最后一個單詞下移一行進行顯示，如果下移的那個單詞長度還是超過了容器寬度，則會溢出 word-wrap 設置wo...

spacewander 2019-08-30 15:54 評論0 收藏0
圖解CSS3讀書筆記文本與顏色

摘要：將內容在邊界內換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...

lvzishen 2019-08-28 18:26 評論0 收藏0