0Pricing
CSS Academy · Leçon

Alignement, décoration et espacement du texte

Alignez le texte, ajoutez des soulignements ou des barrés et contrôlez l’espacement des lettres et des lignes.

Alignement, décoration et espacement du texte est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

text-align

text-align contrôle l'alignement horizontal du contenu en ligne à l'intérieur d'un conteneur de bloc.

<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>

text-align: justify

justify étire les lignes pour remplir toute la largeur du conteneur en ajoutant de l'espace entre les mots. Utilisez-le avec hyphens: auto pour éviter les espaces irréguliers dans les conteneurs étroits.

<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>

text-decoration

text-decoration ajoute des lignes au texte. Cette propriété sert généralement à souligner les liens ou à barrer du contenu supprimé.

<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>

Notation longue de text-decoration

text-decoration est une notation abrégée pour la ligne, le style, la couleur et l'épaisseur :

<a href="#">Wavy red underline link</a>

text-transform

text-transform modifie la casse du texte sans changer le code HTML sous-jacent :

<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>

text-indent

text-indent met en retrait la première ligne d'un élément de bloc. Utilisez une valeur négative avec un remplissage correspondant pour masquer du texte de manière accessible (remplacement d'image).

<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>

white-space

white-space contrôle la manière dont les espaces et les sauts de ligne du code HTML source sont traités :

  • normal — réduire les espaces et effectuer un retour à la ligne entre les mots
  • nowrap — empêcher le retour à la ligne
  • pre — conserver les espaces et ne pas effectuer de retour à la ligne
  • pre-wrap — conserver les espaces et autoriser le retour à la ligne
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
  return true;
}</pre>

letter-spacing

letter-spacing définit un espace supplémentaire entre les caractères. Les valeurs positives écartent les glyphes ; les valeurs négatives les rapprochent. Utilisez em pour une mise à l'échelle proportionnelle.

<p class="spaced">spaced heading text</p>

word-spacing

word-spacing ajoute un espace supplémentaire entre les mots. Cette propriété est rarement nécessaire, mais elle est utile pour affiner le texte justifié ou les grands titres d'affichage.

<h1>Word Spaced Heading Example</h1>

text-overflow: ellipsis

Tronquez le texte qui dépasse avec des points de suspension. Cela nécessite overflow: hidden et white-space: nowrap.

<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>

Texte vertical avec writing-mode

writing-mode fait pivoter la direction du flux du texte. Associé à text-orientation, il permet une typographie verticale CJK ou des libellés pivotés originaux.

<div class="label">Vertical Label Text</div>

Vérification rapide

Quelles sont les trois propriétés nécessaires pour afficher des points de suspension lorsque le texte dépasse ?

Récapitulatif

text-align positionne le contenu en ligne dans son conteneur. text-decoration ajoute ou supprime des lignes. text-transform modifie la casse. L'association white-space: nowrap + overflow: hidden + text-overflow: ellipsis est la méthode classique pour tronquer du texte.

Questions Fréquemment Posées

La leçon « Alignement, décoration et espacement du texte » est-elle gratuite ?

Oui — le texte complet de « Alignement, décoration et espacement du texte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Alignement, décoration et espacement du texte » ?

Alignez le texte, ajoutez des soulignements ou des barrés et contrôlez l’espacement des lettres et des lignes. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Alignement, décoration et espacement du texte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Familles de polices et polices sûres pour le web
  2. Taille, épaisseur et style des polices
  3. Alignement, décoration et espacement du texte
  4. Google Fonts et @font-face
← Retour à CSS Academy