La propriété text-indent définit la quantité d'espace horizontal qui doit être laissée avant le début de la première ligne d'un élément contenant du texte. L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés hanging et each-line peuvent être utilisés pour modifier ce comportement.
| Valeur initiale | 0 |
|---|---|
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Média | visuel |
| Valeur calculée | le pourcentage tel que spécifié ou la longueur absolue, ainsi que les mots-clé comme spécifiés |
| Animable | oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel. |
| Ordre canonique | La longueur ou le pourcentage avant les mots-clés, si les deux sont présents. Si plusieurs mots-clés sont présents, ils apparaissent dans le même ordre que dans la grammaire formelle. |
Syntaxe
/* Valeurs de longueur */ /* Type <length> */ text-indent: 3mm; text-indent: 40px; /* Valeurs de pourcentages */ /* relatives à la largeur */ /* du bloc englobant */ /* Type <percentage> */ text-indent: 15%; /* Valeurs avec un mot-clé */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* Valeurs globales */ text-indent: inherit; text-indent: initial; text-indent: unset;
Valeurs
<length>- L'indentation est définie de façon absolue avec une longueur (
<length>). On peut utiliser des valeurs négatives. Voir la page sur<length>pour les différentes unités possibles. <percentage>- L'indentation est définie en proportion de la largeur du bloc englobant (type
<percentage>). each-line- L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (wrap).
hanging- Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
Syntaxe formelle
<length> | <percentage> && [ hanging || each-line ]
Exemples
Indentation simple
HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
CSS
p {
text-indent: 5em;
background: powderblue;
}
Résultat
Indentation proportionnelle
HTML
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
CSS
p {
text-indent: 30%;
background: plum;
}
Résultat
Spécifications
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Text Level 3 La définition de 'text-indent' dans cette spécification. |
Version de travail | Ajout des mots-clés hanging et each-line. |
| CSS Transitions La définition de 'text-indent' dans cette spécification. |
Version de travail | text-indent peut être animée. |
| CSS Level 2 (Revision 1) La définition de 'text-indent' dans cette spécification. |
Recommendation | The behavior with display: inline-block and anonymous block boxes have been explicitly defined. |
| CSS Level 1 La définition de 'text-indent' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support simple | 1.0 (1.7 ou moins) | 1.0 | 3.0 | 3.5 | 1.0 (85) |
hanging |
Pas de support[1] | Pas de support | Pas de support | Pas de support | Pas de support |
each-line |
Pas de support[1] | Pas de support | Pas de support | Pas de support | Pas de support |
| Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | 1.0 (1.9.2) | ? | ? | ? | ? |
hanging |
Pas de support | Pas de support | Pas de support | Pas de support | Pas de support |
each-line |
Pas de support | Pas de support | Pas de support | Pas de support | Pas de support |
[1] Gecko n'implémente pas encore cette fonctionnalité, voir bug 784648.