From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/text-indent/index.md | 140 ++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 files/fr/web/css/text-indent/index.md (limited to 'files/fr/web/css/text-indent/index.md') diff --git a/files/fr/web/css/text-indent/index.md b/files/fr/web/css/text-indent/index.md new file mode 100644 index 0000000000..e2db574dea --- /dev/null +++ b/files/fr/web/css/text-indent/index.md @@ -0,0 +1,140 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

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.

+ +
{{EmbedInteractiveExample("pages/css/text-indent.html")}}
+ +

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 ({{cssxref("<length>")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("<length>")}} pour les différentes unités possibles.
+
<percentage>
+
L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("<percentage>")}}).
+
each-line {{experimental_inline}}
+
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 {{experimental_inline}}
+
Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

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

+ +

{{EmbedLiveSample('Indentation_simple','100%','100%') }}

+ +

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

+ +

{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}{{Spec2('CSS3 Text')}}Ajout des mots-clés hanging et each-line.
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent peut être animée.
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("css.properties.text-indent")}}

-- cgit v1.2.3-54-g00ecf