Transformação de texto CSS com letras maiúsculas em maiúsculas

Aqui está o meu HTML:

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

Aqui está o meu CSS:

.link {text-transform: capitalize;}

A saída é:

Small Caps & ALL CAPS

e eu quero que a saída seja:

Small Caps & All Caps

Alguma ideia?

Não há como fazer isso com CSS, você pode usar PHP ou Javascript para isso.

Exemplo de PHP:

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

Exemplo de jQuery (agora é um plugin!):

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

Você quase pode fazer isso com:

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

Isso lhe dará a saída:

Small caps
All caps

Converta com JavaScript usando .toLowerCase()e capitalizefaria o resto.

Pergunta interessante!

capitalizetransforma todas as primeiras letras de uma palavra em maiúsculas, mas não transforma as outras letras em minúsculas. Nem mesmo a :first-letterpseudo-classe vai cortá-la (porque se aplica à primeira letra de cada elemento, não a cada palavra), e não vejo uma maneira de combinar letras minúsculas e maiúsculas para obter o resultado desejado.

Tanto quanto eu posso ver, isso é realmente impossível com CSS.

@Harmen mostra soluções PHP e jQuery bonitas em sua resposta.

Gostaria de sugerir uma solução CSS pura que seja mais útil do que a primeira letra apresentada, mas também muito semelhante.

.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>

Embora isso seja limitado à primeira linha, pode ser útil para mais casos de uso que a solução da primeira letra , pois aplica capitalização a toda a linha e não apenas à primeira palavra. (todas as palavras na primeira linha) No caso específico do OP, isso poderia ter resolvido.

Notas: Conforme mencionado nos comentários da primeira letra da solução, a ordem das regras CSS é importante! Observe também que mudei a <a>tag de uma <div>tag porque, por algum motivo, o pseudoelemento ::first-linenão funciona com <a>tags nativamente, mas é bom <div>ou <p>não. EDIT: o <a>elemento funcionará se display: inline-block;for adicionado à .linkclasse. Obrigado a Dave Land por descobrir isso!

Nova nota: se o texto for agrupado , a letra maiúscula será perdida, porque agora ela está na segunda linha (a primeira linha ainda está ok).

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; }

O que Khan "acabou fazendo" (que é mais limpo e funcionou para mim) está nos comentários do post marcado como resposta.

captializeafeta somente a primeira letra da palavra. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Pode ser útil para java e jstl.

1. Inicialize variável com mensagem localizada.
2. Depois disso, é possível usá-lo na função jstl toLowerCase.
3. Transforme com CSS.

No JSP

1

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

2)

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

Em CSS

3)

.content {
  text-transform:capitalize;
}

Você pode fazer isso com a primeira letra css! por exemplo, eu queria para o menu:

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

Ele roda apenas com elementos de bloco - portanto, o bloco embutido!

Se os dados vierem de um banco de dados, como no meu caso, você pode baixá-los antes de enviá-los para uma lista de seleção / lista suspensa. Pena que você não pode fazê-lo em CSS.

Depois de pesquisar muito, achei a função / expressão jquery para alterar o texto na primeira letra apenas em maiúsculas, modifico esse código de acordo para torná-lo viável para o campo de entrada. Quando você escrever algo no campo de entrada e depois mover para outro arquivo ou elemento, o texto desse campo será alterado apenas com maiúscula na primeira letra. Não importa o texto do tipo de usuário com letras maiúsculas ou minúsculas completas:

Siga este código:

Etapa 1: Chame a biblioteca jquery no cabeçalho html:

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

Etapa 2: escreva o código para alterar o texto dos campos de entrada:

<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>

Etapa 3: Crie campos de entrada HTML com os mesmos IDs que você usa no código jquery, como:

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

O ID deste campo de entrada é: edit-submit-first-name (Ele usa no código jquery na etapa 2)

** Resultado: verifique se o texto será alterado depois que você mover o foco desse campo de entrada para outro elemento. Porque estamos usando o foco do evento jquery aqui. O resultado deve ser o seguinte: Tipo de usuário: "obrigado", ele será alterado para "Obrigado". **

Boa sorte

A solução PHP, no back-end:

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

Sei que esta é uma resposta tardia, mas se você quiser comparar o desempenho de várias soluções, tenho um jsPerf que criei.

As soluções Regex são as mais rápidas, com certeza.

Aqui está o jsPerf: https://jsperf.com/capitalize-jwaz

Existem 2 soluções regex.

O primeiro usa /\b[a-z]/g. O limite de palavras incluirá maiúsculas como não divulgação à não divulgação.

Se você deseja colocar apenas letras maiúsculas em maiúsculas precedidas por um espaço, use o segundo regex

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

se você estiver usando jQuery; Esta é uma maneira de fazer isso:

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

Aqui está uma versão mais fácil de ler, fazendo a mesma coisa:

//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');
});

Demo

tudo errado existe -> variante de fonte: letras minúsculas;

transformação de texto: capitalizar; apenas a primeira letra