text-autospace

Baseline 2025 *

Newly available

Since November 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS text-autospace cho phép bạn chỉ định khoảng cách được áp dụng giữa các ký tự Trung/Nhật/Hàn (CJK) và các ký tự không phải CJK.

Tạo ra hành vi mặc định là tự động áp dụng khoảng cách giữa các ký tự CJK và không phải CJK, và xung quanh dấu câu. Giá trị này có tác dụng tương đương với việc áp dụng cả ideograph-alpha và ideograph-numeric.

<autospace>

Cung cấp nhiều quyền kiểm soát hơn đối với hành vi khoảng cách. Nhận từ khóa no-autospace, hoặc kết hợp một hoặc nhiều giá trị ideograph-alpha, ideograph-numeric và punctuation, tùy chọn theo sau là insert hoặc replace.

no-autospace: Tắt khoảng cách tự động giữa các ký tự CJK và không phải CJK.
ideograph-alpha: Chỉ thêm khoảng cách giữa các ký tự chữ tượng hình (như Katakana và chữ Hán) và các chữ cái không phải chữ tượng hình (như Latin). Không thêm khoảng cách giữa ký tự chữ tượng hình và số không phải chữ tượng hình.
ideograph-numeric: Chỉ thêm khoảng cách giữa các ký tự chữ tượng hình (như Katakana và chữ Hán) và các số không phải chữ tượng hình (như Latin). Không thêm khoảng cách giữa ký tự chữ tượng hình và chữ cái không phải chữ tượng hình.
punctuation: Thêm khoảng cách không ngắt xung quanh dấu câu theo yêu cầu của quy ước chữ nghĩa riêng của từng ngôn ngữ.
insert: Chỉ thêm khoảng cách được chỉ định nếu không có khoảng trắng hiện có giữa các chữ viết chữ tượng hình và không phải chữ tượng hình.
replace: Thay thế khoảng trắng hiện có (chẳng hạn U+0020) giữa các ký tự chữ tượng hình và không phải chữ tượng hình bằng khoảng cách được chỉ định.

auto

Để trình duyệt chọn khoảng cách phù hợp về mặt chữ nghĩa. Khoảng cách có thể khác nhau giữa các trình duyệt và nền tảng.

Note: Nếu không chỉ định insert hoặc replace, hành vi sẽ giống như insert.

Note: Thuộc tính này có tính cộng dồn với các thuộc tính word-spacing và letter-spacing. Lượng khoảng cách được đóng góp bởi cài đặt letter-spacing sẽ được cộng thêm vào khoảng cách tạo ra bởi text-autospace. Tương tự với word-spacing.

Định nghĩa hình thức

Initial value	`normal`
Applies to	text elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Cú pháp hình thức

text-autospace = 
  normal       |
  <autospace>  |
  auto         

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

Ví dụ

Ví dụ này hiển thị sự khác biệt giữa các giá trị khác nhau của text-autospace. Hãy thử chọn một giá trị từ hộp thả xuống để xem nó ảnh hưởng đến khoảng cách trong văn bản như thế nào.

<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;
});

Đặc tả kỹ thuật

Specification
CSS Text Module Level 4 # propdef-text-autospace

Tương thích trình duyệt

Xem thêm

text-spacing-trim
Đơn vị ic và ric
Mô-đun CSS Text

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content