HTML中空格的實現方法詳解

2021-08-28 01:30:23 字數 1944 閱讀 1762

[align=center][size=large]html中空格的實現方法詳解[/size][/align]

瀏覽器總是會截短 html頁面中的空格。如果在文字中寫10個空格,在顯示該頁面之前,瀏覽器會刪除它們中的9個。如需在頁面中增加空格的數量,需要使用 字元實體。即使是乙個空格也盡量不要直接在頁面中打,因為在大多數編輯器中空格是透明滴,很容易就被刪掉;另外,html壓縮時候,空格很可能被乾掉!

[b]1.1 space鍵直接輸入[/b]

缺點:瀏覽器在解析 html 時,會把連續的空格解析成乙個。

[b]1.2 使用html中的空格佔位符[/b]

優點:瀏覽器在解析 html 時,寫幾個空格佔位符就佔幾個空格位。

缺點:空格間距非常大時,必須增加多個佔位符,導致頁面體積變得非常大。

[b]1.2.1常見空格實體介紹[/b]

實體名稱 簡介

按下space鍵產生的空格,該空格佔據寬度受字型影響明顯而強烈。

等同於字型寬度的一半(如16px字型中就是8px)。其特性:透明;佔據的寬

度正好是1/2個中文寬度;基本不受字型影響。

等同於乙個字型寬度(如16px字型中就是16px)。其特性:透明;佔據的寬度

正好是1個中文寬度;基本不受字型影響。

佔據的寬度比較小。它是em之六分之一寬。

[b]1.2.2常見空格實體編號介紹[/b]

(實體編號)== 普通的英文半形空格

(實體編號)==  ==  ==no-break space(普通的英文半形空格但不換行)

(實體編號)== 中文全形空格(乙個中文寬度)

(實體編號)==  == en空格(半個中文寬度)

(實體編號)==  == em空格(乙個中文寬度)

(實體編號)== 四分之一em空格(四分之一中文寬度)

相比平時的空格( ),nbsp擁有不間斷(non-breaking)特性。即連續的nbsp會在同一行內顯示。即使有100個連續的nbsp,瀏覽器也不會把它們拆成兩行。

[b]1.3例項介紹[/b]

實現等寬兩端對齊效果:

買 寶 貝:

我的**:

社 區:

方法一:使用空格佔位符。

方法二:使用em單位,即1em可認為是乙個字元寬度。

買寶貝:

我的**:

社群:

.half-word

.two-word

[b]1.4相關css屬性

1.4.1 white-space屬性[/b]

用於設定文字中空格的處理方式。white-space:pre;時,瀏覽器會保留文字中的空格和換行。特別適合於在網頁中顯示程式**。

例:

int sub(int x,int y)

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

[b]1.4.2 letter-spacing屬性[/b]

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

例:歡迎光臨!

說明:若文字中有英文單詞,則空白會加在字母之間,而不是單詞之間。

[b]1.4.3 word-spacing屬性[/b]

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

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

[b]1.4.4 text-indent屬性[/b]

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

例:歡迎光臨!

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

html中空格顯示

html提供了5種空格實體 space entity 它們擁有不同的寬度,非斷行空格 是常規空格的寬度,可執行於所有主流瀏覽器。其他幾種空格 在不同瀏覽器中寬度各異。它叫不換行空格,全稱no break space,它是最常見和我們使用最多的空格,大多數的人可能只接觸了 它是按下space鍵產生的空...

html中空格字元實體整理

瀏覽器總是會截短 html 頁面中的空格。如果您在文字中寫 10 個空格,在顯示該頁面之前,瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量,您需要使用字元實體。本篇就單介紹空格的字元實體,html提供了6種空格實體 space entity 在web頁面上,一般有3種書寫 3.charco...

HTML中的5中空格實體

html提供了5種空格實體 space entity 它們擁有不同的寬度,非斷行空格 是常規空格的寬度,可執行於所有主流瀏覽器。其他幾種空格 在不同瀏覽器中寬度各異。它叫不換行空格,全稱no break space,它是最常見和我們使用最多的空格,大多數的人可能只接觸了 它是按下space鍵產生的空...