Pourquoi « text-transform : capitalize » ne fonctionne-t-il pas sur le texte en majuscules ?

Transformation de texte CSS : la majuscule ne fonctionne pas sur toutes les majuscules

Dans ce scénario, l'objectif est de mettre en majuscule la première lettre de chaque mot dans le texte lorsque le texte est fourni en majuscules. Cependant, en appliquant text-transform: capitalize; aux éléments HTML n'obtient pas l'effet souhaité consistant à mettre en majuscule la première lettre de chaque mot dans le texte en majuscules.

Pour résoudre ce problème, une approche CSS légèrement modifiée peut être adoptée :

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

Ce code CSS utilise les techniques suivantes :

• text-transform : minuscule ; : convertit tout le texte dans les éléments .link en minuscules.
• text-transform : majuscule ; appliqué à :first-letter et :first-line met en majuscule sélectivement la première lettre de chaque mot et la première ligne du texte, respectivement.

En appliquant ces styles, le résultat souhaité est obtenu :

Small Caps
All Caps

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!