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

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

  1. text-indent: Espace avant un texte
  2. text-transform: Transformation du texte
  3. white-space: Controle des espaces blancs
  4. 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 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
<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 :

  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
<p> class="word_space">Mots espacés de 5px.</p> Apprendons la gestion des polices en CSS >>>

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/coder-en-css-capital-minuscule-espacement-texte.html Votes: 4.2 / 5 étoiles - 14 vote(s) et 10 commentaires