Propriété CSS text-indent
Baseline
Large disponibilité
*
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é CSS text-indent définit la longueur de l'espace vide (indentation) qui est placé avant les lignes de texte dans un bloc.
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>
Ce texte est contenu dans un seul paragraphe. Ce paragraphe comporte deux
phrases.
</p>
<p>
Ceci est un nouveau paragraphe. Il y a un élément de saut de ligne
<code><br></code> après cette phrase.<br />Le voici ! Remarquez
comment cela affecte l'indentation.
</p>
</div>
</section>
section {
font-size: 1.25em;
background-color: darkslateblue;
align-items: start;
}
#example-element {
text-align: left;
margin-left: 3em;
background-color: slateblue;
color: white;
}
Syntaxe
/* Valeurs de type <length-percentage> */
text-indent: 3mm;
text-indent: 40px;
text-indent: 15%;
/* Valeurs avec un mot-clé */
text-indent: 5em each-line;
text-indent: 5vb hanging;
text-indent: 5% hanging each-line;
/* Valeurs globales */
text-indent: inherit;
text-indent: initial;
text-indent: revert;
text-indent: revert-layer;
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 un pourcentage (
<percentage>). Le pourcentage est relatif à la largeur du bloc englobant. each-line-
L'indentation affecte la première ligne du conteneur de bloc ainsi que chaque ligne après un saut de ligne forcé, mais n'affecte pas les lignes après un retour à la ligne automatique.
hanging-
Inverse les lignes indentées. Toutes les lignes sauf la première seront indentées.
Description
La propriété CSS text-indent définit la longueur de l'espace vide (indentation) qui est placé avant les lignes de texte dans un conteneur de bloc. L'indentation définie par la propriété se produit au niveau du bord de début en ligne de la boîte de contenu. La valeur est un <length-percentage>, éventuellement avec un ou les deux mots-clés each-line et/ou hanging. La valeur initiale est 0.
Les valeurs en pourcentage sont relatives à la taille intérieure de l'axe en ligne du conteneur de bloc, qui est la dimension de la zone de contenu uniquement, excluant le remplissage et la bordure du conteneur.
La propriété <length-percentage> peut prendre une valeur positive ou négative. Une valeur négative crée un retrait égal à la valeur absolue correspondante à la valeur positive de <length-percentage>. Une valeur négative repousse effectivement le texte d'une distance égale à la valeur, mais dans la direction opposée. Par exemple, text-indent: 3%; indente la première ligne de texte, en ajoutant un espace blanc correspondant à 3% de la taille intérieure du conteneur avant le texte, repoussant ainsi la première ligne de contenu vers la fin de la ligne. Définir text-indent: -3% décale la première ligne de texte vers l'extérieur, repoussant le début de la première ligne de texte de 3% de la taille intérieure du conteneur au-delà du début de la zone de contenu, dans le remplissage et la bordure, ce qui peut entraîner un débordement du conteneur.
Une valeur négative est différente de l'ajout du mot-clé hanging à une valeur positive. En continuant avec le même exemple, text-indent: 3% hanging n'annule pas l'indentation de la première ligne de texte. Au contraire, elle indente toutes les lignes de texte sauf la première ligne, de 3% de la taille intérieure du conteneur.
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 défini ou la longueur absolue, ainsi que les mots-clé comme définis |
| Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
text-indent =
[ <length-percentage> ] &&
hanging? &&
each-line?
<length-percentage> =
<length> |
<percentage>
Exemples
Utilisation simple
Cet exemple démontre l'utilisation de base de la propriété text-indent.
HTML
Nous incluons deux paragraphes de texte.
<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
Nous utilisons la propriété text-indent pour indenter la première ligne de chaque paragraphe de 5em.
p {
text-indent: 5em;
background: powderblue;
}
Résultat
Indentation proportionnelle
En utilisant le même HTML que dans l'exemple précédent, nous démontrons ici l'utilisation des valeurs en pourcentage et comment les valeurs en pourcentage sont relatives à la zone de contenu de l'élément dans la direction en ligne.
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
Nous définissons la propriété text-indent sur une valeur en pourcentage. Nous avons également ajouté un remplissage et des rayures verticales pour mieux évaluer la taille de l'indentation par rapport au modèle de boîte de l'élément.
p {
text-indent: 30%;
padding: 30px;
background-image: repeating-linear-gradient(
to right,
transparent 0 9.5%,
#dedede 9.5% 10%
);
background: plum;
}
Résultat
Ignorer l'indentation sur le premier paragraphe
Une pratique typographique courante lorsque l'indentation des paragraphes est présente consiste à ignorer l'indentation pour le premier paragraphe. Comme l'indique The Chicago Manual of Style, « la première ligne de texte suivant un sous-titre peut commencer à gauche ou être indentée selon l'indentation habituelle du paragraphe ».
Traiter le premier paragraphe différemment des paragraphes suivants peut se faire en utilisant le combinateur de voisins directs, comme dans l'exemple suivant :
HTML
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu
venenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor
metus. Donec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus
blandit eros et imperdiet auctor. Mauris sapien nunc, condimentum a efficitur
non, elementum ac sapien. Cras consequat turpis non augue ullamcorper, sit
amet porttitor dui interdum.
</p>
<p>
Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,
tincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla
facilisi. In feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor
odio a semper. Donec vitae dapibus ipsum. Donec libero purus, convallis eu
efficitur id, pulvinar elementum diam. Maecenas mollis blandit placerat. Ut
gravida pellentesque nunc, in eleifend ante convallis sit amet.
</p>
<h2>Donec ullamcorper elit nisl</h2>
<p>
Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce tempor
in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,
nunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit
vestibulum nulla. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Donec vulputate leo ut iaculis ultrices.
Cras egestas rhoncus lorem. Nunc blandit tempus lectus, rutrum hendrerit orci
eleifend id. Ut at quam velit.
</p>
<p>
Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed
sollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam
iaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus
ac dui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan
libero, sed euismod ipsum ullamcorper sed.
</p>
CSS
p {
text-align: justify;
margin: 1em 0 0 0;
}
p + p {
text-indent: 2em;
margin: 0;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Text Module Level 3 # text-indent-property |
Compatibilité des navigateurs
Voir aussi
- Propriétés CSS associées :
- Le module de décoration de texte CSS
- Le module de texte CSS
- Apprendre la mise en forme du HTML avec CSS