CSS的空間處理

一、空格規則

瀏覽器通常會忽略HTML代碼中的空白。

上面是一行HTML代碼，文本的前面、里面和后面各有兩個空格。為了便于識別，這里使用半圓形符號來表示空間。

瀏覽器的輸出如下。

你好世界

如您所見，文本前后的空格將被忽略，內部連續的空格將只被算作一個。這是瀏覽器處理空格的基本規則。

如果希望空格按原樣輸出，可以使用前置標簽。

另一種方法是用HTML實體來代替表示空格。

二、空格字符

處理空格的HTML規則適用于各種字符。除了普通的空格鍵，它還包括制表符(t)和新行字符(r和n)。

瀏覽器會自動將這些符號轉換成普通的空格鍵。

在上面的代碼中，文本包含一個換行符，瀏覽器將其視為空格。輸出結果如下。

你好世界

因此，文本內部的換行無效(除非文本放在前置標簽內部)。

菲爾普斯世界/p

上面的代碼使用br標記來明確指示換行符。

三、CSS 的 white-space 屬性

HTML語言的空間處理基本是直接過濾。這樣的處理過于粗糙，完全忽略原文內部的空格可能是有意義的。

CSS提供了一個空白屬性，可以提供更精確的方式來處理空格。這個屬性有六個值，除了一個universal inherit(繼承父元素)，其余五個值在下面依次介紹。

空白屬性的默認值是正常的，這意味著瀏覽器以正常方式處理空格。

在上面的代碼中，文本前面有兩個空格，里面有一個長單詞和一個新的行字符。

然后，容器p指定一個相對較小的寬度。為了便于識別，背景顏色設置為紅色。

p { width: 100pxbackground:紅色；}

顯示效果如下。

可以看到文本開頭的空格被忽略了。因為容器太窄，第一個單詞溢出容器，然后在下一個空間換行。文本中的換行符會自動轉換為空格。

當空白屬性為nowrap時，不會出現換行符，因為超出了容器寬度。

顯示效果如下。

所有文本顯示為一行，不換行。

當空白屬性是pre時，它將被視為pre標記。

顯示效果如下。

以上結果與原文完全一致，保留所有空格和換行符。

當空格屬性被預包裝時，它基本上是根據預標記來處理的。唯一不同的是，當超過容器寬度時，會出現一條新的線。

p { white-space:預包裝；}

顯示效果如下。

文本開頭的空格，里面的空格，換行符都保留，容器外換行。

當空白屬性為行前時，表示保留換行符。除了換行符將按原樣輸出之外，其他都符合空白：正常規則。

顯示效果如下。

除了文本內部的換行符沒有轉換成空格，其他都符合正常的處理規則。這對詩化文本很有用。

四、參考鏈接

HTML中空白什么時候重要？作者：帕特里克布羅塞特

《白色空間》，作者莎拉科普

總結

以上是生活随笔為你收集整理的html5空白站位符号,空格代码(隐形空白符号)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。