Propriété CSS text-decoration-skip-ink

La propriété text-decoration-skip-ink spécifie comment les soulignements et les surlignements sont tracés lorsqu'ils croisent un glyphe.

INFO

Lorsque la text-decoration-line propriété est définie sur "underline" et "overline", la propriété text-decoration-skip-ink a un effet. La valeur "Line-through" n'est pas affectée.

Valeur initiale	auto
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS Text Decoration Module Level 4
Syntaxe DOM	object.style.textDecorationSkipInk = "none";

Syntaxe

Valeurs CSS text-decoration-skip-ink

css

text-decoration-skip-ink: auto | none | initial | inherit;

Exemple de la propriété text-decoration-skip-ink :

Exemple de code CSS text-decoration-skip-ink

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .ex1 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: none;
      }
      .ex2 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: auto;
      }
    </style>
  </head>
  <body>
    <h2>
        Text-decoration-skip-ink property example
    </h2>
    <h3>
        Text-decoration-skip-ink: none;
    </h3>
    <p class="ex1">
      Lorem ipsum is simply dummy text
    </p>
    <h3>
        Text-decoration-skip-ink:auto;
    </h3>
    <p class="ex2">
      Lorem ipsum is simply dummy text
    </p>
  </body>
</html>

Try it Yourself »

Résultat

Liste des valeurs CSS text-decoration-skip-ink

Valeurs

Valeur	Description
auto	Les soulignements et les surlignements ne sont tracés que là où ils ne touchent pas ou ne s'approchent pas de près d'un glyphe. Il s'agit de la valeur par défaut de cette propriété.
none	Les soulignements et les surlignements sont tracés pour tout le contenu textuel, y compris les parties qui croisent les descentes et montées des glyphes.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

Que fait la propriété CSS 'text-decoration-skip-ink' ?

Il force le texte à être souligné sans sauter aucun caractère.Il fait que le soulignement passe au-dessus des descentes.Il change la couleur du soulignement pour qu'elle corresponde à celle du lien.Il modifie le style du soulignement pour qu'il soit pointillé, tireté ou continu.Il applique automatiquement un soulignement au texte.Il peut empêcher les soulignements de couper les glyphes.

Propriété CSS text-decoration-skip-ink ​

Syntaxe ​

Exemple de la propriété text-decoration-skip-ink : ​

Résultat ​