CSS : Propriété text - Gestion du texte

Plusieurs propriétés CSS sont disponibles afin de présenter le texte (dans une balise p, div, etc...)

Alignement du texte : text-align

Indique l'alignement horizontale du texte.
Les 4 valeurs possibles sont :

• left (à gauche)
• center (centré)
• right (à droite)
• justify (justifié)

Exemple(s)

<p style="text-align : left;">A gauche</p>
<p style="text-align : center;">Centré</p>
<p style="text-align : right;">A droite</p>
<p style="text-align : justify;">Texte justifié</p>

Décoration du texte : text-decoration

Décore un texte ou un mot (souligner, surligner, barrer, clignoter).
Les 4 valeurs possibles sont :

• overline (surligner)
• line-through (barrer)
• underline (souligner)
• blink (clignoter : ne fonctionne pas sous IE)

Exemple(s)

<p style="text-decoration : overline;">Surligner</p>
<p style="text-decoration : line-through;">Barrer</p>
<p style="text-decoration : underline;">Souligner</p>
<p style="text-decoration : blink;">Clignoter</p>

Indentation du texte : text-indent

Décale la première ligne d'un paragraphe (ou d'un texte).
La valeur peut être exprimé en px (pixel), em (unité relative), % (pourcentage), pt (point).

Exemple(s)

<p style="text-indent : 10px">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Nam sit amet lacus ut nisi convallis mattis.
Integer dignissim eleifend purus, sit amet ultrices diam interdum in.
Praesent ultrices suscipit dolor ut laoreet.
Maecenas eleifend odio vitae quam feugiat hendrerit.
Suspendisse potenti. Aenean eget lectus sed sapien auctor semper.
Nunc ut dictum mauris. Vivamus nisl felis, commodo ac elementum et, mattis quis neque.
Etiam tellus justo, scelerisque id sagittis a, blandit ac purus.
Sed mollis purus in velit accumsan sit amet dignissim enim fringilla.
</p>

Casse du texte : text-transform

Modifie la casse du texte (minuscule ou majuscule).
Les 4 valeurs possibles sont :

• capitalize (première lettre en majuscule)
• uppercase (majuscule)
• lowercase (minuscule)
• none (normal)

Exemple(s)

<p style="text-transform: uppercase;">majuscule</p>
<p style="text-decoration : lowercase;">MINUSCULE</p>

Hauteur de ligne : line-height

Modifie l'espacement entres deux lignes. La taille dépend de la police utilisée.
La valeur peut être exprimé en px (pixel), em (unité relative), % (pourcentage), pt (point).

Exemple(s)

<p style="line-height : 20px;">Lorem ipsum dolor sit amet</p>

Espace entre les lettres : letter-spacing

Modifie l'espacement entre les lettres.
La valeur peut être exprimé en px (pixel), em (unité relative), % (pourcentage), pt (point).

Exemple(s)

<p style="letter-spacing : 10px;">Lorem ipsum dolor sit amet</p>

Espace entre les mots : word-spacing

Modifie l'espacement entre les mots.
La valeur peut être exprimé en px (pixel), em (unité relative), % (pourcentage), pt (point).

Exemple(s)

<p style="word-spacing : 10px;">Lorem ipsum dolor sit amet</p>