The text-decoration-skip
CSS property sets what parts of an elementβs content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.
Note: Most other browsers are converging on supporting the simpler text-decoration-skip-ink
property.
/* Keyword values */ text-decoration-skip: none; text-decoration-skip: objects; text-decoration-skip: spaces; text-decoration-skip: edges; text-decoration-skip: box-decoration; /* Multiple keywords */ text-decoration-skip: objects spaces; text-decoration-skip: leading-spaces trailing-spaces; text-decoration-skip: objects edges box-decoration; /* Global values */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset;
Syntax
Values
none
- Nothing is skipped. Thus, text decoration is drawn for all text content and across atomic inline-level boxes.
objects
- The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
spaces
- All spacing is skipped: all Unicode white space characters and all word separators, plus any adjacent
letter-spacing
orword-spacing
. leading-spaces
- The same as
spaces
, except that only leading spaces are skipped. trailing-spaces
- The same as
spaces
, except that only trailing spaces are skipped. edges
- The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)
box-decoration
- The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.
Formal definition
Initial value | objects |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ]
Examples
Skipping edges
HTML
<p>Hey, grab a cup of <em>coffee!</em></p>
CSS
p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 4 The definition of 'text-decoration-skip' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-skip | Chrome
No support
57 — 64
| Edge No support No | Firefox No support No | IE No support No | Opera
No support
44 — 50
| Safari
Full support
12.1
| WebView Android
No support
57 — 64
| Chrome Android
No support
57 — 64
| Firefox Android No support No | Opera Android
No support
43 — 46
| Safari iOS
Full support
12.2
| Samsung Internet Android
No support
7.0 — 9.0
|
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.