HTML中空格佔位符的幾種方式

2022-03-25 05:15:20 字數 1281 閱讀 6486

**:  謝謝

一、使用全形空格

全形空格被解釋為漢字,所以不會被被解釋為html分隔符,可以按照實際的空格數顯示。

二、使用空格的替代符號

替代符號就是在需要顯示空格的地方加入替代符號,這些符號會被瀏覽器解釋為空格顯示。

空格的替代符號有以下幾種:

名稱編號描述 

不斷行的空白(1個字元寬度)  

半個空白(1個字元寬度)  

乙個空白(2個字元寬度)  

窄空白(小於1個字元寬度)

可以用名稱或編號作為空格的替代符號,名稱必須小寫,末尾的「;」不能省略。

如:歡  迎  光  臨!

顯示效果為:歡  迎  光  臨!

三、使用css的 white-space 屬性

css的white-space屬性用於設定文字中空格的處理方式,當white-space屬性取值為pre時,瀏覽器會保留文字中的空格和換行,這樣你就可以直接在文字中使用空格和回車了。

這種方法特別適合於在網頁中顯示程式**。比如:顯示一段c程式**。

white-space:pre">int sub(int x,int y)

顯示效果為:

int sub(int x,int y)

使用html的標籤也可以達到類似的效果,但標籤有一些不太好的特性,不如使用css的white-space屬性更方便。

四、使用css的 letter-spacing 屬性

css的letter-spacing屬性用於設定文字中字元之間的間隔,它的取值可以是乙個帶單位的長度值,瀏覽器會在字和字之間設定指定長度的空白。比如:

letter-spacing:30px">歡迎光臨!

顯示效果為:

歡迎光臨!

注意,如果文字中有英文單詞,則空白會加在字母之間,而不是單詞之間。

五、使用css的 word-spacing 屬性

css的word-spacing屬性用於設定文字中單詞之間的間隔,它的取值可以是乙個帶單位的長度值,瀏覽器會在單詞和單詞之間設定指定長度的空白。比如:

顯示效果為:

注意,html是以空格來區分單詞的,它會把單詞間的空白按指定長度顯示。

六、使用css的 text-indent 屬性

css的text-indent屬性用於設定首行縮排,它的取值可以是乙個帶單位的長度值,瀏覽器會在段落的首行開始處設定指定長度的空白。比如:

text-indent:2em">歡迎光臨!

顯示效果為:

歡迎光臨!

說明:em 是乙個相對長度單位,2em 表示要縮排兩個字的距離。

HTML佔位符之「空格」

1.常用 不換行空格,全稱no break space,它是按下space鍵產生的空格。空格不會累加 只顯示乙個 使用html表示才會累加,該空格佔據寬度受字型影響。2.ensp 半形空格,全稱en space,en為em寬度的一半 em類似於px受設定不同為20px 1em或其他自定義大小 佔據0...

HTML空格佔位符彙總

1.常用 不換行空格,全稱no break space,它是按下space鍵產生的空格。空格不會累加 只顯示乙個 使用html表示才會累加,該空格佔據寬度受字型影響。2.半形空格,全稱en space,en為em寬度的一半 em類似於px受設定不同為20px 1em或其他自定義大小 佔據0.5個中文...

HTML中各類空格佔位符

符號 表示普通的英文半形空格 普通的英文半形空格但不換行 中文全形空格 乙個中文寬度 半形 en 空格 半個中文寬度,不受字型影響 全形 em 空格 乙個中文寬度,不受字型影響 四分之一全形 em 空格 四分之一中文寬度 普通空格 相比普通空格,不間斷,按下space鍵產生的空格,不累加 em是字型...