text-decoration-skip

La propriété text-decoration-skip définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.

css
/* Syntaxe avec un mot-clé */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;
text-decoration-skip: spaces;

/* Plusieurs mots-clés */
text-decoration-skip: object spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/* Valeurs globales */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

Note : La valeur ink initialement définie pour cette propriété a été déplacée vers la propriété text-decoration-skip-ink.

Syntaxe

Valeurs

none

La propriété text-decoration s'applique à tous les éléments sélectionnés.

objects

La propriété text-decoration n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.

spaces

Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire des caractères Unicode considérés comme des blancs, des séparateurs de mots et toute propriété letter-spacing ou word-spacing adjacente).

leading-spaces

Comportement analogue à spaces mais seuls les espaces avant les mots sont ignorés.

trailing-spaces

Comportement analogue à spaces mais seuls les espaces après les mots sont ignorés.

edges

La décoration de text-decoration est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche. An example of "text-decoration-skip: edges;".

box-decoration

La propriété text-decoration n'est pas appliquée pour les marges, bordures et zones de remplissage (padding) des éléments fils.

Définition formelle

Valeur initialeobjects
Applicabilitétous les éléments
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

text-decoration-skip = 
none |
auto

Exemples

CSS

css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edge;
}

HTML

html
<p>Bonjour tout le monde, quelle journée !</p>

Résultat

Spécifications

Specification
CSS Text Decoration Module Level 4
# text-decoration-skipping

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-skip
Experimental
auto
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.