Comment puis-je mettre en majuscule uniquement la première lettre des mots tout en préservant le texte entièrement en majuscules en CSS ?

Transformation de texte CSS : capitaliser sur toutes les majuscules

Dans ce scénario, appliquer la transformation de texte : capitaliser la propriété aux éléments avec majuscule ou le texte en minuscules donne la majuscule souhaitée pour les mots minuscules. Cependant, le problème se pose avec le texte tout en majuscules, où le résultat souhaité est de préserver la majuscule.

Pour relever ce défi, une solution CSS peut être implémentée en utilisant une combinaison de transformation de texte : minuscules et texte. -transform : propriétés majuscules, ainsi que les pseudo-classes :first-letter et :first-line.

Voici la mise à jour CSS :

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

Cette combinaison transforme tout le texte en minuscules tout en préservant la majuscule de la lettre initiale. En appliquant ce style aux éléments a du code HTML fourni, vous pouvez obtenir le résultat souhaité :

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!