The text-decoration-skip
CSS property specifies what parts of the 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.
/* Single keyword */ text-decoration-skip: none; text-decoration-skip: objects; text-decoration-skip: edges; text-decoration-skip: box-decoration; /* Multiple keywords */ text-decoration-skip: spaces leading-spaces; text-decoration-skip: spaces trailing-spaces; text-decoration-skip: spaces leading-spaces trailing-spaces; text-decoration-skip: objects edges box-decoration; /* Global keywords */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset;
Initial value | objects |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
Values
none
- Nothing is skipped, i.e. 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, i.e. all Unicode white space characters and all word separators, plus any adjacent
letter-spacing
orword-spacing
. Ifspaces
is specified, you must also specifyleading-spaces
,trailing-spaces
, or both, to specify exactly where spaces must be skipped. ink
- The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
edges
- The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (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 Syntax
none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]
Example
HTML content
<p><em>Hey,</em> <em>grab a cup of coffee!</em></p>
CSS content
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. |
Editor's 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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57 | No | No | No | 44 | 8 -webkit- 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 57 | 57 | No | No | No | 44 | 8 -webkit- 1 |
1. Only supports the none
and skip
values; all other values behave like those two values.
Document Tags and Contributors
Tags:
Contributors to this page:
toptalo,
fscholz,
chrisdavidmills,
wbamberg,
mfluehr,
bmathews,
jpmedley,
una,
247flashgames,
Siilwyn,
Sebastianz,
SphinxKnight
Last updated by:
toptalo,