CSS text-decoration-skip Property

Description

The text-decoration-skip 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.

The text-decoration-skip property has been deprecated or is no longer in any CSS working groups.

Initial value

objects

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.textDecorationSkip

Syntax

text-decoration-skip: none | [ objects || spaces || ink || edges || box-decoration ] 

Values

• noneSkip nothing: text-decoration is drawn for all text content and across atomic inline-level boxes.
• objectsSkip this element (its entire margin box) if it is an atomic inline (such as an image or inline-block).
• spacesSkip all spacing, i.e. all characters with the Unicode White_Space property [UAX44] and all word separator characters, plus any adjacent letter-spacing or word-spacing.
• inkSkip over where glyphs are drawn: interrupt the decoration line to let the shape of the text show through where the text decoration would otherwise cross over a glyph.
• edgesThe browser should place the start and end of the line inwards slightly (e.g. by half a line thickness) from the content edge of the decorating box so that, e.g. two underlined elements side-by-side do not appear to have a single underline.
• box-decorationSkip over the box's margin, border, and padding areas. Note that this only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.

Example

.class {
   text-decoration-skip: spaces;
}

Browser Support

Desktop
X	X	57	X	44	12.1
Tablets / Mobile
57	57	X	43	12.2	7.0