你不知道的空格


本文對了解的空格分為幾個Level,看大家能達到哪個level。

Level1: 半角空格

歷史最悠久的空格,在1967年,ASCII 規范中被定義。
空格在 ASCII 中編碼為0x20, 占位符為一個半角字符。在日常英文書寫和代碼編寫中使用。

Level2: 全角空格

中文輸入中的空格(標准說法為中日韓表意字符(CJK)中使用的寬空格)。和其他漢字一樣,作為GBK的一個字符,其對應的unicode碼為\u3000.寬度是2個半角空格的大小。
例如:

  國父 孫中山先生 

Level3: 不間斷空格 ( non-breaking space )

unicode 為 \u00A0, 在代碼中可能會出現的編碼錯誤(utf8 編碼0xC2 0xA0) 就是它了。
在Word中,會遇到一個有多個單詞組成的詞組被分割在兩行文字中,這樣很容易讓人看不明白。這時候,不間斷空格就可以上場了。
輸入不間斷空格,會將不間斷空格連着的單詞在一行展示。
舉個例子:

上面英文使用了不間斷空格,下面沒有使用。所以上面的英文自動在一行展示,而下面沒有。
在word中輸入不間斷空格的方式為: (Ctrl + Shift + Space)

除了在word等文本編輯軟件中使用,其實不間斷空格在html 中大量使用。  是html 中最為常見的空格。由於html頁面中,如果有多個連着的半角空格,則空格只會展示一個。而使用  空格,則會顯示占位半個自寬。

Level4: 零寬度空格 (ZERO WIDTH SPACE)

零寬度空格有兩種

  1. 零寬度空格 unicode 編碼為 \u200B.

不可見非打印字符。有了半角空格,也有了全角空格,其實還有零寬度空格。因為寬度為零,因此該字符是一個不可見字符。
這個編碼雖然是不可見的,但是也是非常有用的。它可以替換html中的標簽(軟換行, html5 新增)。

  1. 零寬度非中斷空格(ZWNBSP) unicode 編碼為 \u2060 (之前使用\ufeff表示,unicode 3.2 開始 \ufeff 標記unicode文檔的字節序。)
    該空格結合了 non-breaking space 和 零寬度空格的特點。既會自動換行,寬度又是0。

零寬度空格(軟換行)舉例:

一行連續的英文編碼:

<p style="font-size:100px;">PhpIsTheBestProgramingLanguageInTheWorld</p>

chrome 中將顯示不換行:

而如果在每個可以換行的地方加上 <wbr />, 則可以在標記的最近的地方換行。

<p style="font-size:100px;">Php<wbr />Is<wbr />The<wbr />Best<wbr />Programing<wbr />Language<wbr />In<wbr />The<wbr />World</p>

chrome 中將顯示:

Level5: 其他空格字符空格

雖然已經有半角空格、全角空格,但是上面的空格如果字體變化了,不會隨着字體的變化而變化。
因此,又有了可以隨着字體的變化而變化的空格,簡單羅列如下:

在html 的寬度度量中,有一種單位叫em,是按照字體大小定義的,下面的em也是字體的寬度。
打印字符的空格有很多種,羅列幾個:

名稱 unicode 編碼 html 標記 特征和用途
短空格 \u2002 &ensp; html 中占位半個字
長空格 \u2003 &emsp; html 中占位一個字
1/3em空格 \u2004 &emsp13; 占用1/3個空格
1/4em空格 \u2005 &emsp14; 占用1/4個空格
1/6em空格 \u2006 &emsp14; 占用1/6個空格
數樣間距 (figure space) \u2007 &numsp; 在等寬字體中,寬度是一個字符的寬度。
行首前導空格 (punctuation space) \u2008 &puncsp; 寬度約為 0x20 的寬度。
瘦弱空格 (thin space) \u2009 &thinsp; 寬度是 全角打印空格的 1/5 或者 1/6 (寬度不定,法文設置為1/8), 主要用在打印兩個空的引號之間。
hair space \u200a &hairsp; (瀏覽器目前不支持), 最窄的空格,推薦標准為 (1/10, 1/16)
narrow no-break space \u202f &nnbsp; 和0a 類似,不同語種中不太一樣。
medium mathematical space \u205f &mediumspace; 在格式化數學公式時使用。是 4/18 的 em寬度,例如:"a + b"中,a 和+ 之間應該用 這個空格

相關鏈接:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM