Comment puis-je mettre en majuscule uniquement la première lettre de chaque mot en CSS tout en préservant toutes les majuscules existantes ?

Transformation de texte CSS : capitaliser le dilemme des majuscules

La propriété text-transform en CSS contrôle la mise en majuscule du texte. Lorsqu'il est défini sur « capitaliser », il met en majuscule la première lettre de chaque mot. Cependant, cela pose un défi lorsqu'il s'agit de mots qui sont déjà en majuscules.

Le problème

Dans l'extrait HTML et CSS fourni :

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

.link {
  text-transform: capitalize;
}

Le résultat est "Small Caps & ALL CAPS", alors que le résultat souhaité est "Small Caps & All Caps."

Solution

Pour obtenir le résultat souhaité, une combinaison de règles CSS peut être utilisée :

.link {
  text-transform: lowercase;
}

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

• Le text-transform : la règle minuscule convertit tout le texte des éléments ".link" en minuscules.
• La règle text-transform : majuscule appliquée à les pseudo-éléments :first-letter et :first-line mettent respectivement en majuscule la première lettre et la première ligne de chaque élément.

Cette approche garantit que les mots déjà en majuscules (comme "ALL CAPS" ) sont conservés tout en mettant toujours en majuscule la première lettre des autres mots. Le résultat résultant sera :

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!