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.

  • Initial valueobjects
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: none | [ objects || spaces || ink || edges || box-decoration ] 

text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;
  • 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.
.class {
   text-decoration-skip: spaces;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.