text-spacing-trim
The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The text-spacing-trim CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters. 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 | |
text-spacing-trim Experimental | 123 | 123 | | | 123 | |
normal Experimental | 123 | 123 | | | 123 | |
space-all Experimental | 123 | 123 | | | 123 | |
space-first Experimental | 123 | 123 | | | 123 | |
trim-start Experimental | 123 | 123 | | | 123 | |
Syntax
.japanese-text {
text-spacing-trim: space-all;
}Live demo
Use cases
Use text-spacing-trim
Use text-spacing-trim when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply text-spacing-trim to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test text-spacing-trim 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-spacing-trim does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features