CSS : text-indent, text-transform, white-space, word-spacing

Mettre en forme un texte en CSS

En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style.

• text-indent: Espace avant un texte
• text-transform: Transformation du texte
• white-space: Controle des espaces blancs
• word-spacing: Espace entre les mots

A savoir

Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien)

Espace avant la première ligne de texte (Text Indent) Valeurs possibles

• valeur en px
• pourcentage

Voir un exemple

Texte avec un espace de 10px pixels.

Voir le code CSS

.indent { text-indent: 10px; }

Voir le code dans l'élément

<p class="indent">
Texte avec un espace de 10px pixels.
</p>

Vous pouvez aussi controller la taille des lettres dans un texte. Valeurs possibles :

• none (rien)
• capitalize (capitale)
• lowercase (minuscule)
• uppercase (tout en capitale)

Voir un exemple

Voir le code CSS

.transform_caps {text-transform: capitalize;}
.transform_up {text-transform: uppercase;}
.transform_low {text-transform: lowercase;}

Voir le code dans l'élément

.transform_caps {text-transform: capitalize;}
.transform_up {text-transform: uppercase;}
.transform_low {text-transform: lowercase;}

Vous pouvez controler les espaces blancs dans un texte. Valeurs possibles

• normal
• pre
• nowrap

Voir un exemple

NORMAL Le texte passera à la ligne en fonction de son contenant, pour s'ajuster à celui-ci et rester dans ses limites. Valeur par défaut.

PRE Le formatage du source est conservé par le 
 navigateur, et s'il contient un retour à la ligne 
  celui-ci sera interprété comme un <br> 
 (identique à <pre> ... <pre> du HTML) :
  Le texte dans ce cas reste bien cadré dans sa boite
  qui contient l'élément texte. 

Voir le code CSS

.normal{ white-space: normal };
.pre { white-space: pre; }
.nowrap { white-space: nowrap ;}

Voir le code dans l'élément

.normal{ white-space: normal };
.pre { white-space: pre; }
.nowrap { white-space: nowrap ;}

Vous pouvez ajuster les espaces entre les mots dans un texte : Valeurs possibles

• normal
• valeurs en px

Voir un exemple

Mots espacés de 5px.

Voir le code CSS

.word_space {word-spacing: 5px;}

Voir le code dans l'élément

<p> class="word_space">Mots espacés de 5px.</p>

Apprendons la gestion des polices en CSS >>>