---
title: "中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距 - Neil 的作品集"
description: "中文和英文、數字之間要不要加空白，爭論了很多年。text-autospace 讓瀏覽器自動補上一點間距，不用再手動打。這篇用並排的互動範例實測：間距有多寬、會不會跟手打的空白疊加、複製出來的文字有沒有變、程式碼區塊要注意什麼，最後也直接套用到這個網站上。"
canonical_url: "https://neillin.com/blog/text-autospace/"
last_updated: 2026-10-09
meta:
  author: Neil
  keywords: "無障礙網頁, 設計管理, 資料視覺化, UI, UX, 切版"
  "og:description": "中文和英文、數字之間要不要加空白，爭論了很多年。text-autospace 讓瀏覽器自動補上一點間距，不用再手動打。這篇用並排的互動範例實測：間距有多寬、會不會跟手打的空白疊加、複製出來的文字有沒有變、程式碼區塊要注意什麼，最後也直接套用到這個網站上。"
  "og:image": "https://neillin.com/_og/s/o_d8c6592dfe36e52a.png"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距 - Neil 的作品集"
  "twitter:image": "https://neillin.com/_og/s/o_d8c6592dfe36e52a.png"
---

> Index of every page on this site: [llms.txt](https://neillin.com/llms.txt)

:::

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

2026年10月9日  

[前端技術](https://neillin.com/blog?category=frontend "查看「前端技術」分類的所有文章")CSS前端開發無障礙瀏覽器支援

  

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

## 前言

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

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

我自己的習慣是會打空白，但難免漏掉。 [CSS 與 HTML 技巧清單](https://neillin.com/blog/css-techniques-checklist)裡的 `text-autospace` 剛好在處理這件事：讓瀏覽器在中文和英文、數字之間，自動補上一點間距。

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

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

你的瀏覽器支援度

- `text-autospace`偵測中（需要 JavaScript）

## 一、先看效果

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

互動範例：同一句話，左邊關閉、右邊開啟；上排沒打空白、下排有打空白

*`text-autospace: no-autospace`沒打空白*

我用Chrome 141測試text-autospace，間距只有0.125em。

我用Chrome 141測試text-autospace，間距只有0.125em。

寬度測量中（需要 JavaScript）

*`text-autospace: normal`沒打空白*

我用Chrome 141測試text-autospace，間距只有0.125em。

我用Chrome 141測試text-autospace，間距只有0.125em。

寬度測量中（需要 JavaScript）

*`text-autospace: no-autospace`有手打空白*

我用 Chrome 141 測試 text-autospace，間距只有 0.125em。

我用 Chrome 141 測試 text-autospace，間距只有 0.125em。

寬度測量中（需要 JavaScript）

*`text-autospace: normal`有手打空白*

我用 Chrome 141 測試 text-autospace，間距只有 0.125em。

我用 Chrome 141 測試 text-autospace，間距只有 0.125em。

寬度測量中（需要 JavaScript）

試試看：選取右上那一格的文字，複製貼到記事本，會發現沒有多出任何空白。

此處為互動範例，請在網頁上操作。

可以看到幾件事：

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

## 二、寫法

只要一行：

```
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 倍，所以自動補的間距會比手打的窄一些。

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

| 情況 | 例子 | 會不會加 |
| --- | --- | --- |
| 中文接英文 | 用Chrome | 會 |
| 中文接數字 | 共8個 | 會 |
| 已經手打空白 | 用 Chrome | 不會重複加 |
| 跨 HTML 標籤 | `<strong>`、連結、`<code>` 的前後 | 會 |
| 中文標點旁邊 | Chrome，瀏覽 | 不會 |
| 全形英數 | 共８個 | 不會 |
| 部分符號 | 用#標籤、用@帳號 | 會（`$`、`-`、`(`、`/` 等不會） |
| 換行後在行首 | 英文剛好換到下一行開頭 | 不會（行首不會多一段空白） |

跨標籤也會加這點很實用：文章裡常常是「用 `<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 讓瀏覽器自己找位置](https://neillin.com/blog/position-try/)
- [收合的內容，為什麼按 Ctrl+F 找不到？聊聊 hidden="until-found"](https://neillin.com/blog/hidden-until-found/)
- [現代 CSS 與 HTML 技巧整理清單：115 個特性、支援度與實驗優先序](https://neillin.com/blog/css-techniques-checklist/)

## 相關連結

- [MDN — text-autospace](https://developer.mozilla.org/en-US/docs/Web/CSS/text-autospace "另開新視窗")
- [CSS Text Module Level 4 — text-autospace](https://drafts.csswg.org/css-text-4/#text-autospace-property "另開新視窗")
- [W3C — 中文排版需求（clreq）](https://www.w3.org/TR/clreq/ "另開新視窗")
- [Can I use（瀏覽器支援度查詢）](https://caniuse.com "另開新視窗")

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://neillin.com/#website","@type":"WebSite","inLanguage":"zh-Hant-TW","name":"Neil 的作品集","url":"https://neillin.com/","workTranslation":{"@id":"https://neillin.com/en/#website"}},{"@id":"https://neillin.com/blog/text-autospace/#webpage","@type":"WebPage","description":"中文和英文、數字之間要不要加空白，爭論了很多年。text-autospace 讓瀏覽器自動補上一點間距，不用再手動打。這篇用並排的互動範例實測：間距有多寬、會不會跟手打的空白疊加、複製出來的文字有沒有變、程式碼區塊要注意什麼，最後也直接套用到這個網站上。","name":"中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距","url":"https://neillin.com/blog/text-autospace/","isPartOf":{"@id":"https://neillin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://neillin.com/blog/text-autospace/"]}]},{"@id":"https://neillin.com/#person","@type":"Person","jobTitle":"UI/UX 設計師","name":"Neil Lin","url":"https://neillin.com/","sameAs":["https://github.com/Neil-Lin"]},{"@id":"https://neillin.com/blog/text-autospace/#/schema/blog-posting/1","@type":"BlogPosting","dateModified":"2026-10-09","datePublished":"2026-10-09","description":"中文和英文、數字之間要不要加空白，爭論了很多年。text-autospace 讓瀏覽器自動補上一點間距，不用再手動打。這篇用並排的互動範例實測：間距有多寬、會不會跟手打的空白疊加、複製出來的文字有沒有變、程式碼區塊要注意什麼，最後也直接套用到這個網站上。","headline":"中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距","inLanguage":"zh-Hant-TW","keywords":"CSS, 前端開發, 無障礙, 瀏覽器支援","url":"https://neillin.com/blog/text-autospace/","author":{"@id":"https://neillin.com/#person"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://neillin.com/blog/text-autospace/"},"publisher":{"@id":"https://neillin.com/#person"}},{"@id":"https://neillin.com/blog/text-autospace/#/schema/breadcrumb-list/1","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"回首頁","item":"https://neillin.com/"},{"@type":"ListItem","position":2,"name":"部落格","item":"https://neillin.com/blog/"},{"@type":"ListItem","position":3,"name":"中英文之間要不要打空白？text-autospace 讓瀏覽器自動補間距","item":"https://neillin.com/blog/text-autospace/"}]}]}
```

## Sitemap

See the full [sitemap](https://neillin.com/sitemap.md) for all pages.