HTML/CSS中的空格處理_如何保留頁面中的空格

html中的空格的規則

在html中內容中的多個空格一般會被視為一個，連續的多個空格符被自動合並了。同時內容前后的空格也會被清除， 如下：

<p> fly63   com </p>

　　

顯示效果為：

fly63 com

　　

備注：瀏覽器的這種機制處理，同樣適用於除了普通的空格鍵，還包括制表符（\t）和換行符（\r和\n），可以通過使用<br>標簽顯式表示換行。

 

html空格保留

這時候如果希望html中多個連續的空格在網頁上能顯示，在瀏覽器中表現出真實的自身空格縮進和換行效果。 我們知道一般有2種方式，使用<pre>標簽，或者使用&nbsp;來代表空格。如下：

<pre> fly63 com </pre>

　　

或者

<p>&nbsp;fly63 &nbsp;&nbsp; &nbsp;com&nbsp;</p>

html中空格目前有這些：

 	 	不斷行的空白（1個字符寬度）
 	 	半個空白（1個字符寬度）
 	 	一個空白（2個字符寬度）
 	 	窄空白（小於1個字符寬度）

 

css空格保留

1、css中當 white-space 屬性取值為pre時，就按照<pre>標簽的方式處理。瀏覽器會保留文本中的空格和換行,例如：

<p style="white-space:pre"> fly63  com <p>

　　

 顯示效果為：' fly63   com '

 

2、css的white-space屬性為pre-line時，意為保留換行符。除了換行符會原樣輸出，其他都與white-space:normal規則一致。 

<p style="white-space: pre-line">
	fly63
	com
</p>

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

顯示效果為：

'fly63

com'

 

3、css的 letter-spacing 屬性用於設置文本中字符之間的間隔，例如：

<p style="letter-spacing:5px;">歡迎光臨！</p>

　　

顯示效果為：' 歡   迎   光   臨   ！'

 

4、css的 word-spacing 屬性用於設置文本中單詞之間的間隔，例如： 

<p style="word-spacing:5px">Happy new year!</p>

　　

顯示效果為： Happy   new   year!