中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距

話說在前頭：文中的行為我都在 Chromium 上實測過，其他瀏覽器的細節可能不同，有講錯的地方歡迎指正。

前言

寫中文技術文章的人，大概都遇過這個問題：「用Chrome測試」還是「用 Chrome 測試」？

中文和英文、數字之間要不要加空白，爭論了很多年。加了比較好讀，英文單字不會跟中文黏在一起；但要一直手動打，很容易漏，而且複製到別的地方時，空白也會跟著過去。

我自己的習慣是會打空白，但難免漏掉。CSS 與 HTML 技巧清單裡的 text-autospace 剛好在處理這件事：讓瀏覽器在中文和英文、數字之間，自動補上一點間距。

這篇實測完，我也直接把它套用到這個網站上了。

先看一下你的瀏覽器支援度：

一、先看效果

下面是同一句話的四種組合：左邊關閉、右邊開啟；上排沒打空白、下排有手打空白。每一格下面會顯示這一行的實際寬度：

可以看到幾件事：

• 右上那一格：沒打空白，但中文和英文、數字之間自動多了一點間距，比左上好讀很多。
• 下排兩格寬度一樣：已經手打空白的地方，瀏覽器不會再加，不會變成兩倍寬。
• 自動補的間距比手打的空白窄：右上比右下窄，看起來比較緊湊。

二、寫法

只要一行：

html {
  text-autospace: normal;
}

text-autospace 會繼承，所以寫在 html 上，整個網站就都套用了。要關掉某個區塊，就寫 no-autospace。

規格裡其實還有更細的值，例如只處理中文和英文之間的 ideograph-alpha、只處理中文和數字之間的 ideograph-numeric。但我實測 Chromium（141 和 153 都一樣）只接受 normal 和 no-autospace 這兩個值，其他寫法都會被當成無效。Safari 27 另外加入了 insert 這個值，我這邊沒辦法測。

三、實測：間距有多寬？會加在哪裡？

間距是 1/8 個字寬。我在 16px、24px、32px 三種字級測，每個間距分別是 2px、3px、4px，剛好都是字級的 1/8。手打的半形空白，在我測的字型大約是字級的 0.28 倍，所以自動補的間距會比手打的窄一些。

哪些地方會加、哪些不會，我實測的結果整理如下：

跨標籤也會加這點很實用：文章裡常常是「用 <code> 包起來的程式碼」或「一個連結」接在中文後面，這些地方也會自動補上間距。

四、複製和搜尋：文字本身沒有變

這是 text-autospace 跟手打空白最大的差別：它只影響畫面，不改變文字內容。

我實測選取「用Chrome瀏覽」這段文字，拿到的字串還是「用Chrome瀏覽」，innerText 也一樣，沒有多出任何空白。範例下方有提示，你也可以自己複製貼到記事本試試。

這代表：

• 複製出去不會多空白：貼到別的平台，原本的文字是什麼就是什麼。
• 報讀軟體唸的內容不變：間距只是排版上的，不會影響報讀軟體讀到的文字。
• 搜尋還是用原本的文字比對：用 Ctrl+F 搜尋時，比對的是文字內容，不是畫面上的間距。

五、要注意的地方

1. 程式碼區塊要關掉

我實測等寬字型裡也會補間距。程式碼區塊裡如果有中文註解，例如 // 註解abc，對齊就會跑掉。所以程式碼區塊要關掉：

pre {
  text-autospace: no-autospace;
}

2. 不要對行內的 <code> 關掉

我一開始想說「程式碼都關掉好了」，結果發現對 <code> 設定 no-autospace 之後，連 <code> 前後跟中文之間的間距也不見了。行內程式碼前後的間距，正是最需要的地方，所以只關 pre 就好。

3. 自動間距比較窄

前面提到，自動補的是 1/8 個字寬，比手打的空白窄。如果你的網站同時有手打空白和沒打空白的文章，仔細看會發現兩種寬度不一樣。我覺得這個差異可以接受，比起黏在一起好讀很多。

六、套用到這個網站

這個網站的設定就是上面那兩段：html 開啟，pre 關閉。

我的舊文章大部分都有手打空白，實測不會重複加，所以舊文章不用回頭修改。之後寫文章，我還是會維持打空白的習慣，因為文章也會被複製到社群、RSS，或是用不支援的瀏覽器打開，這些地方只看得到文字本身；text-autospace 就當作是漏打時的安全網。

不支援的瀏覽器就是維持原本的樣子，沒有間距而已，不需要額外寫降級。

結論

整理成幾句話：

• text-autospace: normal 讓瀏覽器在中文和英文、數字之間自動補上 1/8 個字寬的間距。
• 已經手打空白的地方不會重複加，跨 HTML 標籤也會加。
• 只影響畫面，複製、搜尋、報讀軟體讀到的文字都不變。
• 程式碼區塊（pre）要關掉，但不要對行內 <code> 關掉。
• 目前 Chromium 只支援 normal 和 no-autospace。

一行 CSS 就讓整個網站的中英混排變好讀，是這一系列裡投資報酬率最高的一個。

你寫中文的時候，中英文之間會打空白嗎？歡迎一起討論！

延伸閱讀

• 提示框被切掉了？用 @position-try 讓瀏覽器自己找位置
• 收合的內容，為什麼按 Ctrl+F 找不到？聊聊 hidden="until-found"
• 現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序

相關連結

• MDN — text-autospace
• CSS Text Module Level 4 — text-autospace
• W3C — 中文排版需求（clreq）
• Can I use（瀏覽器支援度查詢）