html 空白漢字佔位符

蝸牛的北極星之旅發表於2019-12-09

前端開發中,大家可能會遇到這樣的問題:標題存在字數不一樣的情況,但是產品大哥,讓你要對齊。還必須對齊。他說他有強迫症

原來是這樣的:

html 空白漢字佔位符

html 空白漢字佔位符

要變成這樣的:

html 空白漢字佔位符

當遇到這樣的情況時,我們第一個想到的使用空格,但是空格達不到想要效果。下面介紹一些簡單的html 空白漢字佔位符。

html 空白漢字佔位符

全形:是一種電腦字元,是指一個全形字元佔用兩個標準字元(或兩個半形字元)的位置。全形佔兩個位元組。 半形:是指一個字元佔用一個標準的字元位置。半形佔一個位元組。 不管是半形還是全形,漢字都要佔兩個位元組。

   == 一箇中文寬度

  == 普通的英文半形空格

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

  ==   == en空格 (半個中文寬度)

  ==   == em空格 (一箇中文寬度)

  == 四分之一em空格 (四分之一中文寬度)

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

複製程式碼

實踐效果

html 空白漢字佔位符

記住它們,說不定你就用上了

相關文章