text-autospace

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

text-autospace CSS 屬性允許您指定中文/日文/韓文 (CJK) 字元與非 CJK 字元之間應用的間距。

語法

css

text-autospace: normal;
text-autospace: no-autospace;
text-autospace: ideograph-alpha;
text-autospace: ideograph-numeric;
text-autospace: punctuation;
text-autospace: insert;
text-autospace: replace;
text-autospace: ideograph-alpha ideograph-numeric punctuation;
text-autospace: ideograph-alpha ideograph-numeric;
text-autospace: ideograph-alpha ideograph-numeric insert;
text-autospace: auto;

/* Global values */
text-autospace: inherit;
text-autospace: initial;
text-autospace: revert;
text-autospace: revert-layer;
text-autospace: unset;

值

normal

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

<autospace>

提供對間距行為的更多控制。它接受關鍵字 no-autospace，或者 ideograph-alpha、ideograph-numeric 和 punctuation 中的一個或多個組合，可選擇後跟 insert 或 replace。

no-autospace: 停用 CJK 字元與非 CJK 字元之間的自動間距。
ideograph-alpha: 僅在表意文字字元（如片假名和漢字）與非表意文字字母（如拉丁字母）之間新增間距。它不在表意文字字元與非表意文字數字之間新增間距。
ideograph-numeric: 僅在表意文字字元（如片假名和漢字）與非表意文字數字（如拉丁數字）之間新增間距。它不在表意文字字元與非表意文字字母之間新增間距。
punctuation: 根據特定語言的排版約定，在標點符號周圍新增不間斷的間距。
insert: 僅在表意文字和非表意文字指令碼之間沒有現有空格時新增指定的間距。
replace: 用指定的間距替換表意文字和非表意文字字元之間的現有間距（如 U+0020）。

auto

讓瀏覽器選擇排版上合適的間距。間距可能因瀏覽器和平臺而異。

注意：如果既未指定 insert 也未指定 replace，則行為與 insert 相同。

注意：此屬性與 word-spacing 和 letter-spacing 屬性是疊加的。letter-spacing 設定貢獻的間距量會新增到 text-autospace 建立的間距中。word-spacing 也適用相同的情況。

正式定義

在資料庫中未找到值！

正式語法

text-autospace = 
  normal       |
  <autospace>  |
  auto         

<autospace> = 
  no-autospace                                        |
  [ ideograph-alpha || ideograph-numeric || punctuation ] || [ insert | replace ]

示例

此示例展示了 text-autospace 各種值之間的差異。嘗試從下拉框中選擇一個值，檢視它如何影響文字中的間距。

<form>
  <label for="autospace">Choose value for <code>text-autospace:</code></label>
  <select name="autospace" id="autospace">
    <option selected value="no-autospace">no-autospace</option>
    <option value="normal">normal</option>
    <option value="ideograph-alpha">ideograph-alpha</option>
    <option value="ideograph-numeric">ideograph-numeric</option>
  </select>
</form>
<div class="unsupported">
  <code>text-autospace</code> is not supported in your browser.
</div>

html

<main>
  <figure class="no-autospace">
    <figcaption>
      <code>
        text-autospace: <span id="autospace-value">no-autospace</span>;
      </code>
    </figcaption>
    <div>
      <p>HTML超文字標記語言</p>
      <p>42四十二</p>
    </div>
  </figure>
</main>

css

.no-autospace {
  text-autospace: no-autospace;
}
.auto {
  text-autospace: auto;
}
.normal {
  text-autospace: normal;
}
.ideograph-alpha {
  text-autospace: ideograph-alpha;
}
.ideograph-numeric {
  text-autospace: ideograph-numeric;
}

figure {
  margin: 1rem;
  div {
    font-size: 2rem;
    padding: 1rem;
    font-family: sans-serif;
    border: tomato solid 1px;
  }
  p {
    margin: 0;
  }
}
main {
  max-width: max-content;
}
@supports not (text-autospace: normal) {
  form {
    display: none;
  }
  .unsupported {
    color: red;
  }
}
@supports (text-autospace: normal) {
  .unsupported {
    display: none;
  }
}

const chose = document.querySelector("#autospace");
const fig = document.querySelector("figure");
const codeValue = document.querySelector("#autospace-value");
chose.addEventListener("change", (e) => {
  fig.className = e.target.value;
  codeValue.innerText = e.target.value;
});

規範

規範
CSS 文字模組第 4 級 # propdef-text-autospace

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者於 2025 年 10 月 10 日最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題