[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鍵產生的空...