files/fr/web/css/text-indent/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

---
title: text-indent
slug: Web/CSS/text-indent
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/text-indent
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>text-indent</code></strong> 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.</p>

<p>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 <code>hanging</code> et <code>each-line</code> peuvent être utilisés pour modifier ce comportement.</p>

<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
/* Type &lt;length&gt;       */
text-indent: 3mm;
text-indent: 40px;

/* Valeurs de pourcentages */
/* relatives à la largeur  */
/* du bloc englobant       */
/* Type &lt;percentage&gt;       */
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;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>L'indentation est définie de façon absolue avec une longueur ({{cssxref("&lt;length&gt;")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("&lt;percentage&gt;")}}).</dd>
 <dt><code>each-line</code> {{experimental_inline}}</dt>
 <dd>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 (<em>wrap</em>).</dd>
 <dt><code>hanging</code> {{experimental_inline}}</dt>
 <dd>Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="Indentation_simple">Indentation simple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">p {
  text-indent: 5em;
  background: powderblue;
}</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Indentation_simple','100%','100%') }}</p>

<h3 id="Indentation_proportionnelle">Indentation proportionnelle</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">p {
  text-indent: 30%;
  background: plum;
}</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Ajout des mots-clés <code>hanging</code> et <code>each-line</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td><code>text-indent</code> peut être animée.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>The behavior with <code>display: inline-block</code> and anonymous block boxes have been explicitly defined.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.text-indent")}}</p>