html怎麼在文字中保留空格

在html中，可以使用white-space屬性在文字中保留空格，只需要在元素中設定「white-space:pre|pre-line」樣式即可。 white-space屬性宣告建立版面配置過程中如何處理元素中的空白符。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

html中的空格的規則

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

<p> fly63   com </p>　

顯示效果為：

fly63 com　

備註：瀏覽器的這種機制處理，同樣適用於除了普通的空格鍵，還包括製表符（\t）和換行符（\r和\n），可以透過使用0c6dc11e160d3b678d68754cc175188a標籤明確表示換行

white-space 屬性設定如何處理元素內的空白。

這個屬性宣告建立佈局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 新增的。

1、css中當 white-space 屬性取值為pre時，就依照e03b848252eb9375d56be284e690e873標籤的方式處理。瀏覽器會保留文字中的空格與換行,例如：

<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>

顯示效果為：

'fly63

#com'

推薦學習：html影片教學

以上是html怎麼在文字中保留空格的詳細內容。更多資訊請關注PHP中文網其他相關文章！