Formate un nombre pour l'affichage
Tutoriel sur la propriété CSS text-underline-position
La propriété CSS text-underline-position vous permet de contrôler la position de la ligne de soulignement d'un texte.
Définition
La propriété text-underline-position définit la position de la ligne de soulignement d'un texte à l'intérieur du bloc de texte.
Syntaxe générale
La syntaxe générale de la propriété text-underline-position est la suivante :
text-underline-position: auto | under | left | right;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | oui |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: |
Valeurs possibles
- auto : La ligne de soulignement est automatiquement positionnée selon les conventions typographiques par défaut.
- under : La ligne de soulignement est placée sous le texte.
- left : La ligne de soulignement est placée à gauche du texte.
- right : La ligne de soulignement est placée à droite du texte.
Exemples pratiques d'utilisation
Voici quelques exemples d'utilisation de la propriété text-underline-position :
/* Sous-ligne automatique */ text-underline-position: auto; /* Sous-ligne placée en dessous du texte */ text-underline-position: under; /* Sous-ligne placée à gauche du texte */ text-underline-position: left; /* Sous-ligne placée à droite du texte */ text-underline-position: right;
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tutoriel sur text-underline-position</title>
<script type="text/javascript">
function ChangeUnderPos (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the text of the selected option
var underLineValue = selectTag.options[whichSelected].text;
var div = document.getElementById ("myDiv");
if ('textUnderlinePosition' in div.style) {
div.style.textUnderlinePosition = underLineValue;
} else {
alert ("Votre navigateur ne supporte pas cette propriété!");
}
}
</script>
</head>
<body>
<div id="myDiv" style="text-decoration: underline;">Changer text-underline-position</div>
<br />
<select onchange="ChangeUnderPos (this);" style="width: 7em;">
<option selected="selected" />auto
<option />left
<option />right
<option />under
</select>
</body>
Astuces et conseils d'utilisation
- La valeur auto est généralement recommandée, car elle suit les conventions typographiques par défaut.
- La personnalisation de la position de la ligne de soulignement peut être utile dans des cas spécifiques de design.
- Assurez-vous de tester la compatibilité avec différents navigateurs, car certaines versions plus anciennes peuvent ne pas prendre en charge cette propriété.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 33 | 12 | 74 | 12.1 | 20 |