Gestion des textes : modifier les espaces, mettre en majuscule, minuscule, Espace avant un texte
Mettre en forme un texte en CSS
A découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)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
Espace avant un texte
Espace avant la première ligne de texte (Text Indent) : text-indent: valeur;
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>
Espace avant un texte
Vous pouvez aussi controller la taille des lettres dans un texte : text-transform: value;
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;}
Espace blanc
Vous pouvez controler les espaces blancs dans un texte :white-space: valeur;
Valeurs possibles :
- normal
- pre
- nowrap
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.
interprété : Le texte dans ce cas défile
à perte de vue, sauf à rencontrer un "br".
.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 :
- 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 >>>
Le CSS en 3 questions/réponses - en bref
