text-autospace
The text-autospace CSS property sets whether and how to insert spaces in inter-script text (such as when mixing Latin and Chinese characters) and around punctuation. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The text-autospace CSS property sets whether and how to insert spaces in inter-script text (such as when mixing Latin and Chinese characters) and around punctuation. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 140 | 140 | 145 | 18.4 | 140 | 18.4 | |
auto | | | 145 | 18.4 | | 18.4 |
ideograph-alpha | | | 145 | 18.4 | | 18.4 |
ideograph-numeric | | | 145 | 18.4 | | 18.4 |
insert Experimental | | | 145 | | | |
no-autospace | 140 | 140 | 145 | 18.4 | 140 | 18.4 |
normal | 140 | 140 | 145 | 18.4 | 140 | 18.4 |
punctuation | | | | | | |
replace | | | | | | |
Syntax
.mixed-text {
text-autospace: ideograph-alpha
ideograph-numeric;
}Live demo
Use cases
Use text-autospace
Use text-autospace when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply text-autospace to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test text-autospace in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using text-autospace does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features