Maison >interface Web >tutoriel CSS >Comment puis-je mettre en majuscule uniquement la première lettre des mots en majuscules en CSS ?

Comment puis-je mettre en majuscule uniquement la première lettre des mots en majuscules en CSS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-20 02:22:02724parcourir

How Can I Capitalize Only the First Letter of All-Caps Words in CSS?

CSS text-transform : Capitaliser sur toutes les majuscules

Lorsque vous utilisez la propriété text-transform: capitalize en CSS, vous pouvez rencontrer des situations où vous souhaitez mettre uniquement en majuscule le première lettre de mots déjà en majuscules. Pour obtenir ce comportement spécifique, la solution réside dans la combinaison de plusieurs règles de transformation de texte.

Pour capitaliser sur toutes les majuscules, suivez ces étapes :

  1. Mettez tout le texte en minuscules à l'aide du texte- transform : règle en minuscules.
  2. Mettez en majuscule la première lettre de chaque mot à l'aide de la transformation de texte : règle en majuscule.
  3. Majuscule la première ligne en utilisant text-transform: uppercase.

Voici un exemple de la façon dont vous pouvez implémenter cela dans votre CSS :

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

En utilisant cette approche, vous pouvez obtenir l'objectif souhaité sortie où les mots qui sont déjà en majuscules n'ont que leur première lettre en majuscule.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn