文字處理之一：空白字符及white-space屬性

Edison 發布于2019-08-30 15:44 / 1556人閱讀

摘要：瀏覽器的默認行為瀏覽器支持種空白字符空格制表符回車換行。關于換行的具體細節在下一篇博客介紹，這里我們簡單點，只考慮中文字符，字數多了放不下就換一行。

p標簽中插入一段文字，是非常常見的需求，但是仔細分析，這里面有很多需要注意的細節。這篇和下篇博客，主要講對于文本內容顯示的處理，這篇主要介紹空白字符和white-space屬性。

瀏覽器的默認行為

瀏覽器支持4種空白字符：空格、制表符、回車、換行。默認情況下，有以下幾點：

所有的空白字符，都會當成空格處理

Hello World

hello world之間加了一個換行符，但是最后顯示的效果如下：

插入的是換行符，但是最后顯示的時候變成了空格。這也就說明，如果我們有兩段文字，在一個p標簽內并不會保留換行符。要想實現換行效果，要么用兩個p標簽，要么用
來換行。

頭尾的空白符會直接忽略

hello world

在頭部和尾部都有空格，但最后顯示時，兩邊的空格會直接忽略。如果頭尾是換行，也會被忽略掉。為什么要這樣做呢，比如我們寫代碼的時候，為了結構清晰通常喜歡排版一下：

hello world

最后的顯示效果如下：

p標簽內部首尾的兩個換行符都會直接忽略，使得我們排版帶來的空白字符就不會影響最后顯示的效果。span標簽內部首尾的空格也會被忽略，所以，不要指望在span包裹的hello之后和world之前加入空格來增加兩者間距。

多個空格會被合并

這一點應該比較熟悉，我在hello和world之間插入100個空格，也只會顯示一個而已。那么如果我想插入多個空格呢，就只能用到字符實體這種東西了，也就是。

Hello World

white-space屬性

瀏覽器的這種默認行為，為我們提供了很多便利，也符合我們的日常需求，比如代碼的排版不會對展示產生過多影響。但是，這種默認行為也并不總是符合我們的需求。如果需要改變，可以通過white-space屬性來實現，顧名思義，這個屬性就是控制空白字符的，同時，他也會對瀏覽器的默認換行行為有一些影響。

white-space:normal，這是默認值，也就是瀏覽器的默認行為。除了上面提到的空白字符的處理外，當文字在一行放不下時，瀏覽器還會自動換行。關于換行的具體細節在下一篇博客介紹，這里我們簡單點，只考慮中文字符，字數多了放不下就換一行。

文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多文字有點多

最后顯示的效果如下：

white-space:nowrap：所謂wrap，翻譯成中文就是包裹，在CSS里面，我們可以理解成當一行放不下時，為了讓他不超出容器，瀏覽器就要給文字換行，將文字包裹起來。那么nowrap就是不包裹，也就是文字超出就超出吧。

最后顯示的效果如下：

white-space:pre：我希望我寫的格式就是最終展示的瀏覽器，瀏覽器不做任何處理，那就用這個值，或者用

標簽也一樣的效果

最后顯示的效果如下：

我在開頭加的空格沒有被忽略，中間加的換行符也沒有被當成空格，甚至多個換行符也沒有被合并，第二行超長了也沒有自動換行。總之，瀏覽器沒有做任何處理。

white-space:pre-wrap：pre的效果看來有點太粗暴了，我還需要wrap包裹一些，也就是在pre的基礎上希望自動換行。

最后顯示的效果如下：

white-space:pre-line：line是一行的意思，加上line代表我更加強調換行，所以我就保留換行符，并且保留瀏覽器的wrap換行，這兩個都是跟換行相關的。空格還是該合并合并，該忽略忽略，不跟pre一樣搞了。

最后顯示的效果如下：

總結一下

這個屬性其實控制的是三點：

換行符是否當成空格處理

多個空格是否合并，收尾空格是否忽略

是否自動換行

每個屬性對應的行為也就是下面的表

	換行符	空格符的合并及忽略	自動換行
normal	當成空格，并且合并	合并	是
nowrap	當成空格，并且合并	合并	否
pre	保留	保留	否
pre-wrap	保留	保留	是
pre-line	保留	合并	是

關于換行，也還是有很多細節的，下一篇詳聊~

GPU云服務器云服務器 java空白字符處理刪除空白字符串屬性處理數據處理及分析

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

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

【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
14 ,CSS 文字與文本

1.CSS 中長度與顏色 2.CSS 中的文字屬性 3.CSS 中的文本屬性 14.1 CSS 中長度與顏色長度單位說明 in 英寸 cm 公分 mm 公里 cm 以目前字體高度為單位 ex 以小寫字母高度為單位（大部分不支持） pt 1pt/72英寸 pc 1pc/12pt px 像素（推薦使用）顏色單位：說明十六進制如：color:#ff0000 顏色名稱如：color:red ...

blankyao 2019-04-23 11:42 評論0 收藏0
css文本屬性

摘要：的區別指字母間距，對英文和漢字，空格都有效，也可以叫字符間距。指單詞間距，對漢字不支持。時的效果壓縮空白和換行符，排滿不換行。縱向長度，可為負值，向下為正。陰影的模糊長度。的使用有了文字描邊，就有文字填充色。 1. letter-spacing,word-spacing,white-space的區別 letter-spacing指字母間距，對英文和漢字，空格都有效，也可以叫字符間距。 ...

Tony_Zby 2019-08-30 15:53 評論0 收藏0
css文本換行總結

摘要：到文本過長的問題，元素的寬度不足以容那文本的內容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我將會介紹幾種種常用的換行方法。但文本內的換行無效。到文本過長的問題，元素的寬度不足以容那文本的內容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我...

Caizhenhao 2019-08-29 17:16 評論0 收藏0
CSS魔法堂："那不是bug，是你不懂我!" by inline-block

摘要：那不是，是我不懂而已。的用途之一西文是以空格來分隔單詞的，而漢字間則無需空格分隔，但為了統一西文東亞和的排版，于是抽象出一個名為的概念用于分隔詞義單元，則作為的值域，而定義域就是語言信息。前言每當來個需要既要水平排版又要設置固定高寬時，我就會想起display:inline-block，還有為了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后發...

cucumber 2019-08-30 12:56 評論0 收藏0