在html中,可以使用white-space屬性在文本中保留空格,只需要在元素中設置“white-space:pre|pre-line”樣式即可。white-space屬性聲明建立布局過程中如何處理元素中的空白符。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
html中的空格的規(guī)則
在html中內(nèi)容中的多個空格一般會被視為一個,連續(xù)的多個空格符被自動合并了。同時內(nèi)容前后的空格也會被清除, 如下:
<p> fly63 com </p>
顯示效果為:
fly63 com
備注:瀏覽器的這種機制處理,同樣適用于除了普通的空格鍵,還包括制表符(t)和換行符(r和n),可以通過使用<br>標簽顯式表示換行
white-space 屬性設置如何處理元素內(nèi)的空白。
這個屬性聲明建立布局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
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規(guī)則一致。
<p style="white-space: pre-line"> fly63 com </p>
顯示效果為:
'fly63
com'
推薦學習:html視頻教程