Comment puis-je utiliser « text-transform : capitalize » sans affecter les mots en majuscules ?

Remplacement de la transformation de texte CSS : mettre en majuscule pour le texte tout en majuscules

Problème :

Utilisation de la transformation de texte CSS : majuscule ; La règle pour convertir le texte en majuscules en casse de phrase rend problématique lorsque les lettres initiales de ces mots nécessitent intrinsèquement des majuscules, comme les noms propres ou les acronymes.

Comme le démontre l'extrait de code suivant, le résultat souhaité de "Small Caps & All Caps" n'est pas atteint :

HTML :

<a href="#" class="link">small caps</a> &amp; 
<a href="#" class="link">ALL CAPS</a>

CSS :

.link {text-transform: capitalize;}

Résultat :

Small Caps & ALL CAPS

Solution :

Pour obtenir le comportement de capitalisation souhaité tout en conservant la transformation de texte : capitaliser ; règle, le CSS suivant peut être implémenté :

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

Cette modification transforme initialement tout le texte en minuscules, puis re-majuscule la première lettre de chaque mot et la première ligne de texte.

Résultat :

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!