v150 · css · developer trial
CSS4 text-decoration-skip-spaces
A new CSS property that controls whether text-decoration lines (underline, overline, line-through) skip over whitespace characters. When enabled, gaps appear in the decoration at word boundaries, producing a typographically cleaner underline that doesn't pass through spaces.
chrome://flags/#enable-experimental-web-platform-features.
at a glance
| Status in 150 | In developer trial (behind a flag) |
|---|---|
| Flag | chrome://flags/#enable-experimental-web-platform-features |
| Standards position | Firefox: No signal · Safari: No signal |
| Spec | CSS Text Decoration Level 4 §text-decoration-skip-spaces |
| ChromeStatus | 4832783806627840 — CSS4 text-decoration-skip-spaces |
why it exists
Typography conventions for underlines vary across languages and design systems. In many Western typographic traditions, an underline should not extend under the space between words — the gap makes it easier to distinguish word boundaries and avoids the underline visually "cutting through" descender letters. The related text-decoration-skip-ink (already widely supported) handles ink avoidance for letters; text-decoration-skip-spaces handles space avoidance specifically.
the property
| Property | text-decoration-skip-spaces |
|---|---|
| Applies to | All elements |
| Inherited | Yes |
| Initial value | Determined by UA stylesheet (typically none for most browsers) |
Values
none | Decoration lines span the full width including spaces (default behaviour). |
|---|---|
leading | Skip space before the first word (at the start of the inline). |
trailing | Skip space after the last word (at the end of the inline). |
all | Skip all whitespace — leading, trailing, and between words. |
live demo
The demos below show underline on a phrase. In supporting browsers, the first row skips spaces between words.
text-decoration-skip-spaces: all — each word underlined separately
text-decoration-skip-spaces: none — continuous underline across spaces
.skip-spaces {
text-decoration: underline;
text-decoration-skip-spaces: all;
}
.no-skip {
text-decoration: underline;
text-decoration-skip-spaces: none;
}recipes
Elegant link underlines
a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-skip-ink: auto; /* skip descenders */
text-decoration-skip-spaces: all; /* skip inter-word spaces */
}Strikethrough without space lines
.sale-price {
text-decoration: line-through;
text-decoration-skip-spaces: all;
}browser support
| Chrome | 150 — developer trial (flag required) |
|---|---|
| Edge | Tracking Chromium |
| Firefox | No signal |
| Safari | No signal |