Forcer la saisie en majuscules dans le casse de titre dans CSS à l'aide de la transformation de texte

Je suis de la création d'un thème pour un CMS, et ont seulement la possibilité de modifier le CSS de la page (pas de Javascript, PHP, etc).

Est-il un moyen de modifier cette liste d'utilisateurs que nous avons:

JOHN SMITH
DAVID JONES
...

en cas de titre (John Smith, etc) à l'aide de CSS?

text-transform: lowercase; fonctionne ok (john smith, etc), mais text-transform: capitalize; ne fait rien (ce qui reste capitalisés).

Comme demandé, le code HTML est:

<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>

Et le CSS est:

td {
    text-transform: capitalize;
}

source d'informationauteur alexmuller

  1. 22

    text-transform: capitalize; modifie seulement la première lettre de chaque mot, de sorte que si la première lettre d'un mot est déjà capitalisés, text-transform ignore ce mot.

    Exemple:

    JoHN smith deviendra JoHN Smith

    Il n'y a aucun moyen de le faire titre-boîtier en utilisant uniquement CSS sauf si tous les mots sont en minuscules.

  2. 7

    Nous pouvons utiliser une astuce pour le faire. Mais attention pour la compatibilité du navigateur. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

    p{
  text-transform: lowercase;
 }

p:first-letter{
  text-transform: uppercase;
}

    Par exemple:

    c'est un peu de texte.

    C'est un peu de texte.

    c'EST un peu de TEXTE.

    De sortie -> Ceci est du texte

  3. 6

    Ce que vos êtes en train de vivre est de savoir comment il fonctionne. C'est à partir de la spec:

    "capitaliser pose la première
    caractère de chaque mot en majuscule;
    les autres personnages ne sont pas affectés."

    Maintenant, vous pouvez le faire (je suis en supposant que vous avez une liste à un élément de liste <li> tags:

    li:first-letter {
    text-transform: uppercase;
}

    Avec votre minuscule de la li, mais dans l'ensemble, qui n'affecteront que les premiers mots de chaque ligne, de sorte que vous obtenez:

    John smith
David jones

    Je ne crois pas qu'il y est un pur CSS solution pour vous ici. C'est délicat à cause des noms comme John McCain, Oscar de la Hoya, John Smith, PhD, Jane Smith, MD, et les gens qui préfèrent minuscules comme danah boyd ou électronique.e. cummings. Il y a toujours des exceptions lorsque vous essayez d'utiliser le Titre de Cas. Ces exceptions peut vous causer des maux de tête. Si vous n'avez pas de contrôle sur le contenu, le contenu va vous donner des maux de tête.

  4. 3

    Dans votre situation, la seule façon que j'ai jamais eu ce travail est l'utilisation de javascript. Comme les autres réponses de l'état, la capitaliser transformer ne pas faire l'affaire.

    Je pense que si c'est une obligation, alors vous aurez à trouver un moyen de désinfecter les noms en amont. Soit capitaliser correctement, ou de les convertir en minuscules, de sorte que le CSS transformer fonctionnera comme prévu.

    Andrew

  5. 2

    J'ai été confronté à ce problème à de nombreuses reprises lorsque le texte est en majuscule à partir d'un CMS ou une base de données. Ce que je fais est d'utiliser jQuery .chaque fonction pour itérer sur les éléments sélectionnés, appliquer un javascript toLowerCase méthode pour chacune d'elle, puis utiliser les CSS pour définir text-transform: capitalize.

    Fonctionne à chaque fois!

  6. 0

    Cela montre que text-transform: capitalize travaille pour moi dans IE, Chrome et FF pour Windows:

    http://www.tizag.com/cssT/text.php

    Ce qu'utilisez-vous pour essayer?