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


要變成這樣的:

當遇到這樣的情況時,我們第一個想到的使用空格,但是空格達不到想要效果。下面介紹一些簡單的html 空白漢字佔位符。
html 空白漢字佔位符
全形:是一種電腦字元,是指一個全形字元佔用兩個標準字元(或兩個半形字元)的位置。全形佔兩個位元組。 半形:是指一個字元佔用一個標準的字元位置。半形佔一個位元組。 不管是半形還是全形,漢字都要佔兩個位元組。
  == 一箇中文寬度
  == 普通的英文半形空格
  == ==   == no-break space (普通的英文半形空格但不換行)
  ==   == en空格 (半個中文寬度)
  ==   == em空格 (一箇中文寬度)
  == 四分之一em空格 (四分之一中文寬度)
相比平時的空格( ), 擁有不間斷(non-breaking)特性。即連續的 會在同一行內顯示。
即使有100個連續的nbsp,瀏覽器也不會把它們拆成兩行。
複製程式碼
實踐效果
