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

❮ Précédent Suivant ❯

La propriété text-decoration-skip-ink spécifie comment les lignes en dessous ou au dessus du texte sont dessinées lorsqu'elles rencontre un glyphe.

Lorsque la propriété text-decoration-line est définie à "underline" et "overline", la propriété text-decoration-skip-ink a un effet. La valeur "line-through" est sans affectation.

Valeur initiale	auto
Appliquée à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	CSS4
Syntaxe DOM	object.style.textDecorationSkipInk = "none";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété text-decoration-skip-ink</h2>
    <h3>Text-decoration-skip-ink: none;</h3>
    <p class="ex1">Lorem ipsum est simplement du faux texte</p>
    <h3>Text-decoration-skip-ink:auto;</h3>
    <p class="ex2">Lorem ipsum est simplement du faux texte</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Les lignes en dessous ou au dessus du texte ne sont dessinées que s'elles ne touchent pas ou ne s'approchent pas de près d'un glyphe. C'est la valeur initiale de cette propriété.
none	Les lignes en dessous ou au dessus du texte sont dessinées pour tous le contenu de texte y compris parties qui traversent des descendeurs et des ascendeurs de glyphes.
initial	Fait utiliser la valeur initiale
inherit	Hérite la propriété de son élément parent.