Propriété CSS text-decoration-skip

La propriété text-decoration-skip spécifie les parties du contenu d'un élément que la décoration de texte doit ignorer.

Elle contrôle toutes les lignes de décoration de texte tracées par l'élément et ses ancêtres. Contrairement à text-decoration-skip-ink, qui ne cible que l'encre chevauchant le texte, cette propriété tentait d'ignorer les décorations sur les espaces blancs et les éléments remplacés, mais a finalement été supprimée de la spécification.

DANGER

La valeur "ink" a été déplacée vers la text-decoration-skip-ink propriété.

note
Cette propriété est obsolète et bénéficie d'un support navigateur très limité. Envisagez d'utiliser plutôt text-decoration-skip-ink.

Valeur initiale	none
S'applique à	Tous les éléments.
Héritée	Oui.
Animable	Non.
Version	Projet (Obsolète)
Syntaxe DOM	object.style.textDecorationSkip = "spaces";

Syntaxe

Valeurs CSS text-decoration-skip

css

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

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

Exemple de code CSS text-decoration-skip

html

<!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 »

Résultat

CSS text-decoration-skip values list

note
Cette propriété est obsolète et n'est pas prise en charge dans les navigateurs modernes. L'exemple ne produira aucun changement visuel.

Valeurs

Valeur	Description
none	Aucun saut ne sera appliqué. Ainsi, la décoration de texte est tracée pour tout le contenu textuel.
objects	Ignore les décorations sur les éléments remplacés (comme les images) ou les boîtes inline-block.
spaces	Tous les espacements sont ignorés.
leading spaces	Les espaces de début sont ignorés (unités de caractères typographiques, séparateurs de mots, interlettrage ou intermots).
trailing spaces	Les espaces de fin sont ignorés (unités de caractères typographiques, séparateurs de mots, interlettrage ou intermots).
edges	Le début et la fin de la décoration de texte sont légèrement décalés vers l'intérieur par rapport au bord du contenu de la boîte de décoration.
box-decoration	Les zones de marge, de bordure et de remplissage de la boîte sont ignorées.

Compatibilité navigateurs

Navigateur	Support
Chrome	Jamais implémenté
Firefox	Jamais implémenté
Safari	Jamais implémenté
Edge	Jamais implémenté
Opera	Jamais implémenté

Pratique

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

Elle spécifie si les lignes de décoration au-dessus ou en dessous du texte doivent être interrompues.Elle spécifie si et comment une ligne de décoration de texte est tracée à travers le texte lui-même.Elle spécifie quelles parties de la boîte de contenu d'un élément sont concernées par le tracé des lignes de décoration ; elle est principalement utilisée pour définir 'none', 'objects', 'spaces', 'ink', 'edges', 'box-decoration' et 'leading-spaces'.Elle spécifie comment couper une ligne de texte en plusieurs lignes.Elle contrôle le décalage de l'ombre par rapport au texte.Elle spécifie si et comment la ligne de décoration de texte saute par-dessus les valeurs 'none', 'objects', 'spaces', 'ink', 'edges', 'box-decoration' et 'leading-spaces'.

Propriété CSS text-decoration-skip ​

Syntaxe ​

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

Résultat ​

Valeurs ​

Compatibilité navigateurs ​