text-indent
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriété text-indent définit la longueur 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.
Exemple interactif
text-indent: 0;
text-indent: 30%;
text-indent: -3em;
text-indent: 3em each-line;
text-indent: 3em hanging;
text-indent: 3em hanging each-line;
<section id="default-example">
<div id="example-element">
<p>
This text is contained within a single paragraph. This paragraph is two
sentences long.
</p>
<p>
This is a new paragraph. There is a line break element
<code><br></code> after this sentence.<br />There it is! Notice how
it affects the indentation.
</p>
</div>
</section>
section {
font-size: 1.25em;
background-color: #483d8b;
align-items: start;
}
#example-element {
text-align: left;
margin: 0 0 0 3em;
background-color: #6a5acd;
color: white;
}
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-lineExpérimental-
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).
hangingExpérimental-
Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que spécifié ou la longueur absolue, ainsi que les mots-clé comme spécifiés |
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
text-indent =
[ <length-percentage> ] &&
hanging? &&
each-line?
<length-percentage> =
<length> |
<percentage>
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
| Specification |
|---|
| CSS Text Module Level 3 # text-indent-property |
Compatibilité des navigateurs
Chargement…