La transformation de texte CSS capitalise sur toutes les majuscules

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?

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();​

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

Convertissez avec JavaScript en utilisant .toLowerCase()et capitalizeferait le reste.

Question interessante!

capitalizetransforme chaque première lettre d'un mot en majuscules, mais ne transforme pas les autres lettres en minuscules. Même la :first-letterpseudo-classe ne la coupera pas (car elle s'applique à la première lettre de chaque élément, pas à chaque mot), et je ne vois pas de moyen de combiner minuscules et majuscules pour obtenir le résultat souhaité.

Donc, pour autant que je puisse voir, c'est en effet impossible à faire avec CSS.

@Harmen montre de belles solutions de contournement PHP et jQuery dans sa réponse.

Je voudrais suggérer une solution CSS pure qui est plus utile que la solution de première lettre présentée mais qui est également très similaire.

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

Bien que cela soit limité à la première ligne, cela peut être utile pour plus de cas d'utilisation que la solution de première lettre car elle applique une majuscule à la ligne entière et pas seulement au premier mot. (tous les mots de la première ligne) Dans le cas spécifique du PO, cela aurait pu le résoudre.

Remarques: Comme mentionné dans les premiers commentaires de la solution, l'ordre des règles CSS est important! Notez également que j'ai changé la <a>balise pour une <div>balise car, pour une raison quelconque, le pseudo-élément ::first-linene fonctionne pas avec les <a>balises de manière native mais soit <div>ou va <p>bien. EDIT: l' <a>élément fonctionnera s'il display: inline-block;est ajouté à la .linkclasse. Merci à Dave Land d' avoir remarqué ça!

Nouvelle note: si le texte s'enroule, il perdra la majuscule car il est maintenant en fait sur la deuxième ligne (la première ligne est toujours correcte).

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" (qui est plus propre et a fonctionné pour moi) est dans les commentaires du message marqué comme la réponse.

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

Peut être utile pour java et jstl.

1. Initialisez la variable avec un message localisé.
2. Après cela, il est possible de l'utiliser dans la fonction jstl toLowerCase.
3. Transformez-vous avec CSS.

Dans JSP

1.

<fmt:message key="some.key" var="item"/>

2.

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

En CSS

3.

.content {
  text-transform:capitalize;
}

Vous pouvez le faire avec la première lettre css! par exemple je le voulais pour le menu:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

Il ne fonctionne qu'avec des éléments de bloc - donc le bloc en ligne!

Si les données proviennent d'une base de données, comme dans mon cas, vous pouvez la réduire avant de l'envoyer à une liste de sélection / liste déroulante. Dommage que vous ne puissiez pas le faire en CSS.

Après de nombreuses recherches, j'ai trouvé la fonction / expression jquery pour modifier le texte de la première lettre en majuscules uniquement, je modifie ce code en conséquence pour le rendre utilisable pour le champ de saisie. Lorsque vous écrirez quelque chose dans le champ de saisie, puis que vous passerez à un autre fichier ou élément, le texte de ce champ changera avec la majuscule de la première lettre uniquement. Peu importe le texte du type d'utilisateur en majuscules ou minuscules complètes:

Suivez ce code:

Étape 1: Appelez la bibliothèque jquery dans la tête html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Étape 2: Écrivez le code pour modifier le texte des champs de saisie:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

Étape 3: Créez des champs de saisie HTML avec les mêmes identifiants que vous utilisez dans le code jquery comme:

<input type="text" id="edit-submitted-first-name" name="field name">

L'identifiant de ce champ de saisie est: edit-submit-first-name (Il utilise le code jquery à l'étape 2)

** Résultat: assurez-vous que le texte changera après avoir déplacé votre focus de ce champ d'entrée vers un autre élément. Parce que nous utilisons l'événement focus out de jquery ici. Le résultat devrait ressembler à ceci: Type d'utilisateur: "merci" il changera avec "Merci". **

Bonne chance

La solution PHP, en backend:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

Je sais que c'est une réponse tardive, mais si vous souhaitez comparer les performances de diverses solutions, j'ai un jsPerf que j'ai créé.

Les solutions Regex sont certainement les plus rapides.

Voici le jsPerf: https://jsperf.com/capitalize-jwaz

Il existe 2 solutions regex.

Le premier utilise /\b[a-z]/g. La limite des mots comprendra des mots en majuscules tels que la non-divulgation à la non-divulgation.

Si vous ne souhaitez mettre en majuscule que les lettres précédées d'un espace, utilisez la deuxième expression régulière

/(^[a-z]|\s[a-z])/g

si vous utilisez jQuery; voici une façon de le faire:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Voici une version plus facile à lire faisant la même chose:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Démo

tout faux il existe -> font-variant: small-caps;

text-transform: capitaliser; juste la première lettre majuscule