Comment convertir du texte en minuscules en majuscules à l'aide de CSS ?

Transformation de texte CSS : minuscules en majuscules

Pouvez-vous modifier le texte pour le transformer de minuscules en majuscules à l'aide de CSS ?

Comprendre les besoins

Envisagez un scénario dans lequel vous souhaitez que le texte soit formaté de la manière suivante :

• d'abord en minuscules, puis en majuscule uniquement la première lettre de chaque mot .
• Entrée : HELLO WORLD
• Sortie : Hello World

Un autre exemple pourrait être une liste de pays en majuscules, tels que : ROYAUME-UNI, que vous besoin de convertir vers : Royaume-Uni.

Implémentation CSS

Oui, CSS fournit la propriété text-transform pour y parvenir. En le définissant sur « capitaliser », vous pouvez mettre en majuscule la première lettre de chaque mot tout en convertissant les caractères restants en minuscules.

<code class="css">.className {
    text-transform: capitalize;
}</code>

Cette règle CSS s'applique aux éléments portant le nom de classe className, transformant leur texte en conséquence. .

Solution Javascript

Outre CSS, JavaScript peut également être utilisé pour réaliser une transformation de texte :

<code class="javascript">function capitalize(s) {
    return s.toLowerCase().replace(/\b./g, function (a) {
        return a.toUpperCase();
    });
}

console.log(capitalize('this IS THE wOrst string eVeR')); // "This Is The Worst String Ever"</code>

Cette fonction prend une chaîne s comme entrée, la convertit en minuscules, puis utilise une expression régulière pour identifier les limites des mots (b) et mettre en majuscule le premier caractère de chaque mot identifié.

Remarque : Le crédit pour la fonction JavaScript va à la ressource suivante : Mise en majuscule les mots dans une chaîne.

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!