La text-indentpropriété spécifie la quantité de texte d'espace horizontal à déplacer avant le début de la première ligne du contenu textuel d'un élément. L'espacement est calculé à partir du bord de départ de l'élément de conteneur de niveau bloc.
Le bord de départ est généralement à gauche, mais peut être à droite en mode de droite à gauche, comme la propriété direction.
La text-indentpropriété est héritée lorsqu'elle est spécifiée sur un élément de bloc, ce qui signifie qu'elle affectera également les éléments descendants de bloc en ligne. Lorsque vous traitez avec des enfants bloqués en ligne, vous pouvez les forcer à le faire text-indent: 0;.
Syntaxe
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Un cas d'utilisation courant serait simplement stylistique. Indenter la première ligne de paragraphes est un peu démodé et peut évoquer cette sensation. Il pourrait être utilisé à la place de l'espacement après les paragraphes comme indicateur visuel alternatif, bien que l'espacement soit probablement plus lisible en général.
Un autre cas d'utilisation courant est celui du «remplacement d'image» où le texte est expulsé de l'élément via un retrait de texte et un débordement masqué.
pendaison
hangingest une valeur expérimentale et non officielle de la text-indentpropriété. Il inverse les lignes indentées. Fondamentalement, il indente chaque ligne sauf la première, ce qui entraîne une sorte de ponctuation suspendue.
Cette valeur est un indicateur, accompagnant une valeur commune comme une longueur.
chaque ligne
each-lineest une valeur expérimentale et non officielle de la text-indentpropriété. L'idée est d'indenter chaque ligne après un saut de ligne forcé (avec a
Cette valeur est un indicateur, accompagnant une valeur commune comme une longueur.
Démo
Voir le retrait de texte Pen de Chris Coyier (@chriscoyier) sur CodePen.
Prise en charge du navigateur
Assistance de base
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| tout | tout | tout | 3,5+ | 3+ | tout | tout |
valeur suspendue
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| rien | rien | rien | rien | rien | rien | rien |
valeur de chaque ligne
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| rien | rien | rien | rien | rien | rien | rien |