CSS text-decoration-skip Property

The text-decoration-skip property specifies the parts of an element’s content the text decoration should skip over.

It controls all text decoration lines drawn by the element and by its ancestors. Unlike text-decoration-skip-ink, which only targets ink overlapping text, this property attempted to skip decorations over whitespace and replaced elements, but was ultimately removed from the specification.

Danger

The "ink" value was moved to the text-decoration-skip-ink property.

Note

This property is obsolete and has very limited browser support. Consider using text-decoration-skip-ink instead.

Initial Value	none
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	Draft (Obsolete)
DOM Syntax	object.style.textDecorationSkip = "spaces";

Syntax

CSS text-decoration-skip values

text-decoration-skip: none | objects | spaces | leading spaces | trailing spaces | edges | box-decoration;

Example of the text-decoration-skip property:

CSS text-decoration-skip code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin: 1em;
        color: #ccc;
        font-size: 2em;
        text-decoration: underline;
        text-decoration-skip: edges;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-skip property example</h2>
    <p>
      <em>Lorem,</em>
      <em>ipsum is simply dummy text</em>
    </p>
  </body>
</html>

Try it Yourself »

Result

Note

This property is obsolete and not supported in modern browsers. The example will not render any visual changes.

Values

Value	Description
none	No skip will appear. Thus, text decoration is drawn for all text content.
objects	Skips decorations over replaced elements (like images) or inline-block boxes.
spaces	All spacing is skipped.
leading spaces	Leading spaces are skipped (typographic character units, word separators, letter-spacing or word-spacing).
trailing spaces	Trailing spaces are skipped (typographic character units, word separators, letter-spacing or word-spacing).
edges	The start and end of the text decoration is inset slightly from the content edge of the decorating box.
box-decoration	The box’s margin, border, and padding areas are skipped.

Browser Compatibility

Browser	Support
Chrome	Never implemented
Firefox	Never implemented
Safari	Never implemented
Edge	Never implemented
Opera	Never implemented

Practice

What does the 'text-decoration-skip' property in CSS do?

It specifies whether to interrupt the decoration lines above or below the text.
It specifies whether and how a text-decoration line is drawn through the text itself.
It specifies what parts of the content-box of an element the decoration lines are drawn, it is mostly used to set the 'none', 'objects', 'spaces', 'ink', 'edges', 'box-decoration' and 'leading-spaces'.
It specifies how to break the line of text into lines.
It controls the offset of the shadow from the text.
It specifies whether and how the text-decoration-line is skip over the 'none', 'objects', 'spaces', 'ink', 'edges', 'box-decoration' and 'leading-spaces'.