Propriété CSS text-indent

La propriété text-indent spécifie la longueur de l'espace vide de la première ligne dans un bloc de texte.

La direction du texte est spécifiée par la propriété direction.

Si une valeur négative est spécifiée, la première ligne sera indentée à la gauche.

La propriété text-indent ne s'applique qu'à la première ligne du texte dans un élément.

Les valeurs "each-line" et "hanging" sont expérimentales.
Valeur initiale 0
Appliquée à Conteneurs bloc.
Héritée Oui.
Animable Oui. Text-indent est animable.
Version CSS1
Syntaxe DOM object.style.textIndent = "100px";

Syntaxe

text-indent: length | percentage | each-line | hanging | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-indent</h2>
    <p>C'est le même texte avec la propriété text-indent. C'est le même texte avec la propriété text-indent. C'est le même texte avec la propriété text-indent. C'est le même texte avec la propriété text-indent. C'est le même texte avec la propriété text-indent. C'est le même texte avec la propriété text-indent.</p>
  </body>
</html>

Un autre exemple, dans lequel l'indentation est spécifiée en pt, em, % et cm:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.a {
      text-indent: 20pt;
      }
      div.b {
      text-indent: -5em;
      }
      div.c {
      text-indent: 70%;
      }
      div.d {
      text-indent: 4em;
      }
      div.e {
      text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-indent</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
    </div>
  </body>
</html>

Valeurs

Valeur Description
length Spécifie l'indentation en px, pt, cm, em, etc. La valeur par défaut est 0. Valeurs négatives sont autorisées.
percentage Spécifie l'indentation en pourcentage de la largeur du bloc contenant.
each-line L'indentation affecte la première ligne ainsi que chaque ligne après une rupture de ligne forcée, mais n'affecte pas les lignes après une rupture enveloppante.
hanging Inverse les lignes indentées. La première ligne n'est pas indentée.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 3.5+


Trouvez-vous cela utile?

Articles Associées