CSS text-transform capitaliser sur toutes les majuscules

Question

Voici mon HTML:

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

Voici mon CSS:

 .link {text-transform: capitalize;}
 

La sortie est:

 Small Caps & ALL CAPS
 

et je veux que la sortie soit:

 Small Caps & All Caps
 

Des idées?

Answer 1

Vous pouvez presque le faire avec:

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

Cela vous donnera la sortie:

 Small caps
All caps
 

Answer 2

Il n'y a aucun moyen de faire cela avec CSS, vous pouvez utiliser PHP ou Javascript pour cela.

Exemple PHP:

 $text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps
 

Exemple jQuery (c'est un plugin maintenant!):

 // Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​
 

Answer 3

Question intéressante!

capitalize transforme chaque première lettre d'un mot en majuscules, mais il n'est pas de transformer les autres lettres en minuscules. Pas même l' :first-letter de la pseudo-class coupe (car il s'applique à la première lettre de chaque élément, et non pas de chaque mot), et je ne peux pas voir un moyen de la combinaison de minuscules et de capitaliser pour obtenir le résultat souhaité.

Donc autant que je peux voir, c'est en effet impossible de le faire avec les CSS.

@Harmen montre de bonne à la recherche de PHP et jQuery solutions de contournement dans sa réponse.

Answer 4

JavaScript:

 var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}
 

CSS:

 .link { text-transform: capitalize; }
 

---

Ce que Khan "a fini par faire" (ce qui est plus propre et a fonctionné pour moi) se trouve dans les commentaires de la publication marqués comme la réponse.

Answer 5

captialize n'affecte que la première lettre du mot. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform