Classes utilitaires pour contrôler l'alignement, la transformation, le style, la décoration, la famille de police, l'interlignage, l'espacement des lettres, le retour à la ligne et la couleur du texte. Les classes d'alignement, d'interlignage, d'espacement et de wrapping disposent d'équivalents responsives par breakpoint.
.text-left — texte aligné à gauche
.text-center — texte centré
.text-right — texte aligné à droite
.text-justify — texte justifié
sur toute la largeur disponible pour voir l'effet du justify sur un texte un peu plus long.
.text-uppercase — texte en
majuscules
.text-lowercase — TEXTE EN
MINUSCULES
.text-capitalize — première
lettre en majuscule
.text-italic — texte en italique
.text-underline — texte
souligné
.text-line-through — texte
barré
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.text-start |
text-align: start |
.text-left |
text-align: left |
.text-center |
text-align: center |
.text-end |
text-align: end |
.text-right |
text-align: right |
.text-justify |
text-align: justify |
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.text-uppercase |
text-transform: uppercase |
.text-lowercase |
text-transform: lowercase |
.text-capitalize |
text-transform: capitalize |
.text-none |
text-transform: none |
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.text-italic |
font-style: italic |
.text-normal |
font-style: normal |
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.text-underline |
text-decoration: underline |
.text-line-through |
text-decoration: line-through |
.text-no-decoration |
text-decoration: none |
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.text-serif |
font-family: serif |
.text-sans-serif |
font-family: sans-serif |
.text-mono |
font-family: monospace |
Échelle de 6 niveaux plus les valeurs default, inherit et initial. Toutes les classes sont responsives.
.lh-1 — Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloribus alias voluptate.
.lh-3 — Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloribus alias voluptate.
.lh-6 — Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloribus alias voluptate.
| CLASSE | TOKEN CSS |
|---|---|
.lh-default |
var(--line-height) |
.lh-1 |
var(--line-height-xs) |
.lh-2 |
var(--line-height-sm) |
.lh-3 |
var(--line-height-md) |
.lh-4 |
var(--line-height-lg) |
.lh-5 |
var(--line-height-xl) |
.lh-6 |
var(--line-height-xxl) |
.lh-inherit |
line-height: inherit |
.lh-initial |
line-height: initial |
Échelle de 6 niveaux plus les valeurs default, inherit et initial. Toutes les classes sont responsives.
.ls-1 — Espacement xs
.ls-3 — Espacement md
.ls-6 — Espacement xxl
| CLASSE | TOKEN CSS |
|---|---|
.ls-default |
var(--letter-spacing) |
.ls-1 |
var(--letter-spacing-xs) |
.ls-2 |
var(--letter-spacing-sm) |
.ls-3 |
var(--letter-spacing-md) |
.ls-4 |
var(--letter-spacing-lg) |
.ls-5 |
var(--letter-spacing-xl) |
.ls-6 |
var(--letter-spacing-xxl) |
.ls-inherit |
letter-spacing: inherit |
.ls-initial |
letter-spacing: initial |
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.text-nowrap |
white-space: nowrap |
Empêche le retour à la ligne. Le texte reste sur une seule ligne. |
.text-truncate |
overflow: hidden; text-overflow: ellipsis; white-space:
nowrap; max-width: 100% |
Tronque le texte avec une ellipse (…) si le contenu
dépasse la largeur disponible.
|
.text-break |
word-wrap: break-word; overflow-wrap: break-word |
Force le retour à la ligne sur les mots longs ou les URL sans espace. |
La classe .text-wrap-{bp} est disponible uniquement en
responsive.
Elle applique white-space: normal à partir du breakpoint
spécifié,
permettant de réactiver le retour à la ligne après un .text-nowrap.
Classes de couleur de texte générées depuis la map $colors de
abstracts/colors, plus trois classes fixes.
| CLASSE | PROPRIÉTÉ APPLIQUÉE | DESCRIPTION |
|---|---|---|
.text-muted |
color: var(--gray-500) |
Texte atténué, gris moyen. |
.text-color-default |
color: var(--text-color) |
Rétablit la couleur de texte par défaut du thème. |
.text-transparent |
color: var(--transparent) |
Texte transparent. |
.text-{color} |
color: {valeur de la couleur} |
Applique directement la valeur de la couleur depuis $colors.
|
.text-on-{color} |
color: var(--content-on-{color}) |
Couleur de contenu lisible sur un fond de la couleur spécifiée. Utile pour les badges et boutons colorés. |
.text-hover-{color}:hover |
color: {valeur de la couleur} |
Applique la couleur uniquement au survol. |
| TOKEN | UTILISÉ PAR |
|---|---|
--line-height |
.lh-default |
--line-height-xs → --line-height-xxl |
.lh-1 → .lh-6 |
--letter-spacing |
.ls-default |
--letter-spacing-xs → --letter-spacing-xxl |
.ls-1 → .ls-6 |
--gray-500 |
.text-muted |
--text-color |
.text-color-default |
--transparent |
.text-transparent |
--content-on-{color} |
.text-on-{color} |
Les classes suivantes disposent d'équivalents responsives suffixés par le nom du breakpoint,
actifs à partir de la taille spécifiée (min-width).
| GROUPE | SYNTAXE RESPONSIVE |
|---|---|
| Alignement | .text-center-{bp}, .text-left-{bp}, .text-right-{bp}…
|
| Line-height | .lh-1-{bp} → .lh-6-{bp},
.lh-default-{bp}, .lh-inherit-{bp}, .lh-initial-{bp} |
| Letter-spacing | .ls-1-{bp} → .ls-6-{bp},
.ls-default-{bp}, .ls-inherit-{bp}, .ls-initial-{bp} |
| Wrapping | .text-wrap-{bp}, .text-truncate-{bp}, .text-break-{bp} |
Les classes de transformation, style, décoration, famille et couleur ne sont pas responsives : elles n'ont pas d'équivalent suffixé par breakpoint dans le SCSS.
Utiliser .text-truncate sur un élément avec une largeur
contrainte.
Sans largeur définie, max-width: 100% seul ne suffit pas
à déclencher l'ellipse.
Préférer .text-on-{color} sur les textes posés sur un
fond coloré :
la valeur --content-on-{color} garantit un contraste
adapté au fond.
Ne pas combiner .text-nowrap et
.text-truncate sur le même élément :
.text-truncate inclut déjà white-space: nowrap,
la combinaison est redondante.
Typography · WEBDEV-UI DOCS / V1