Gestion des textes : modifier les espaces, mettre en majuscule, minuscule, Espace avant un texte
Mettre en forme un texte en CSS

Mettre en forme un texte en CSS

Espace avant un texte

Espace avant la première ligne de texte (Text Indent) : text-indent: valeur;
Valeurs possibles

1. valeur en px
2. 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

Texte avec un espace de 10px pixels.

Espace avant un texte

Vous pouvez aussi controller la taille des lettres dans un texte : text-transform: value;
Valeurs possibles :

1. none (rien)
2. capitalize (capitale)
3. lowercase (minuscule)
4. uppercase (tout en capitale)

Voir un exemple :

regarder la source, tout le texte est en minuscule.
regarder la source, le texte est en minuscule.
REGARDER LA SOURCE, JE SUIS EN MAJUSCULE

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;} 

Espace blanc

Vous pouvez controler les espaces blancs dans un texte :white-space: valeur;
Valeurs possibles :

1. normal
2. pre
3. 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. 

NOWRAP Sauf les retours à la ligne « br »; aucun autre tag n’est interprété : Le texte dans ce cas défile à perte de vue, sauf à rencontrer un « br ».

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 ;}

Espacement entre les mots

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

word-spacing: value;

Valeurs possibles :

1. normal
2. 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

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

Apprendons la gestion des polices en CSS >>>