中英文間隔CSS

Fri, 04 Sep 2026 00:00:00 +0000

環境

作業系統：Windows 11
程式碼編輯器：Visual Studio Code
紀錄時間：2026年9月

text-autospace CSS屬性允許指定中日韓（CJK）字元和非中日韓字元之間的間距行為。

body {
 text-autospace: normal;
}

normal ：建立預設行為，自動在CJK字元與非CJK字元之間以及標點符號周圍新增間距。此值的效果等同於同時應用 ideograph-alpha 和 ideograph-numeric 。

以往在網頁上用鍵盤打半形空格（Space）會顯得中英文間距過大（寬度高達0.5em）。而 text-autospace 是由瀏覽器自動計算並塞入約1/8 em的微小微調間距，視覺效果比純空格更緊湊、更具美感。

如果網頁內容本身已經有用鍵盤打的實體空格，瀏覽器在解析 text-autospace 時會自動跳過，不會讓你的間距疊加變得更寬。

在VS Code中打開你的檔案，按下Ctrl + H開啟取代視窗，並依照下列步驟設定：

開啟正規表達式模式：請務必點亮搜尋框最右側的 .* 圖示（或按下快捷鍵Alt + R，啟用正規表達式功能。
欄位輸入內容你需要分兩次操作，一次清除「中文+空格+英文」，一次清除「英文+空格+中文」：
- 步驟A：清除【中文 ➔ 英文】之間的空格尋找 (Find)： ([\u4e00-\u9fa5]+) +([a-zA-Z0-9]+) 取代為 (Replace)： $1$2 動作：點擊右側的Replace All（全部取代）圖示（或按Ctrl + Alt + Enter）。
- 步驟B：清除【英文 ➔ 中文】之間的空格尋找 (Find)： ([a-zA-Z0-9]+) +([\u4e00-\u9fa5]+) 取代為 (Replace)： $1$2 動作：再次點擊Replace All（全部取代）。

[\u4e00-\u9fa5] ：代表所有的中文字（Unicode範圍）。 [a-zA-Z0-9] ：代表所有的英文字母與數字。 + （中間有空格）：代表匹配一個或多個連續的半形空格。 () 與 $1$2 ：把前後的文字暫存起來，並在取代時直接黏在一起，中間的空格就會被刪除。