CSS : Propriété text - Gestion du texte

Propriété CSS text

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. Nullam non libero eget ante bibendum ultrices. Suspendisse nec fermentum tellus. Donec ullamcorper viverra felis id ultricies. Aliquam suscipit nisl rhoncus risus hendrerit consectetur. Phasellus nec quam non urna dignissim rhoncus. Maecenas hendrerit ullamcorper nisi ac tristique. Cras sollicitudin urna nec erat vehicula bibendum.</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>