La trasformazione del testo CSS utilizza le maiuscole

Ecco il mio HTML:

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

Ecco il mio CSS:

.link {text-transform: capitalize;}

L'output è:

Small Caps & ALL CAPS

e voglio che l'output sia:

Small Caps & All Caps

Qualche idea?

Non c'è modo di farlo con CSS, per questo potresti usare PHP o Javascript.

Esempio di PHP:

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

Esempio di jQuery (adesso è un 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();​

Puoi quasi farlo con:

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

Ti darà l'output:

Small caps
All caps

Converti con JavaScript utilizzando .toLowerCase()e capitalizefarebbe il resto.

Domanda interessante!

capitalizetrasforma ogni prima lettera di una parola in maiuscolo, ma non trasforma le altre lettere in minuscolo. Neanche la :first-letterpseudo-classe lo taglierà (perché si applica alla prima lettera di ogni elemento, non a ogni parola), e non riesco a vedere un modo per combinare lettere minuscole e maiuscole per ottenere il risultato desiderato.

Per quanto posso vedere, questo è davvero impossibile da fare con i CSS.

@Harmen mostra PHP di bell'aspetto e soluzioni alternative jQuery nella sua risposta.

Vorrei chiedere una soluzione CSS pura che sia più utile della soluzione di prima lettera presentata ma che sia anche molto simile.

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

Sebbene questo sia limitato alla prima riga, può essere utile per più casi d'uso rispetto alla soluzione della prima lettera poiché applica le maiuscole all'intera riga e non solo alla prima parola. (tutte le parole nella prima riga) Nel caso specifico del PO questo avrebbe potuto risolverlo.

Note: Come menzionato nei commenti sulla soluzione della prima lettera , l'ordine delle regole CSS è importante! Si noti inoltre che ho cambiato il <a>tag per un <div>tag perché per qualche motivo lo pseudo-elemento ::first-linenon funziona con i <a>tag in modo nativo ma neanche <div>o va <p>bene. EDIT: l' <a>elemento funzionerà se display: inline-block;viene aggiunto alla .linkclasse. Grazie a Dave Land per averlo individuato!

Nuova nota: se il testo si chiude , perderà la maiuscola perché ora è effettivamente sulla seconda riga (la prima riga è ancora 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; }

Ciò che Khan "ha finito per fare" (che è più pulito e ha funzionato per me) sta nei commenti del post contrassegnato come risposta.

captializeinfluisce solo sulla prima lettera della parola. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Può essere utile per java e jstl.

1. Inizializza variabile con messaggio localizzato.
2. Successivamente è possibile usarlo nella funzione jstl toLowerCase.
3. Trasforma con CSS.

In JSP

1.

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

2.

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

Nel CSS

3.

.content {
  text-transform:capitalize;
}

Puoi farlo con la prima lettera css! ad es. lo volevo per il menu:

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

Funziona solo con elementi a blocchi - quindi il blocco inline!

Se i dati provengono da un database, come nel mio caso, è possibile abbassarli prima di inviarli a un elenco di selezione / elenco a discesa. Peccato che non puoi farlo in CSS.

Dopo aver studiato molto ho trovato la funzione / espressione jquery per modificare il testo nella prima lettera solo in maiuscolo, modifico di conseguenza quel codice per renderlo utilizzabile per il campo di input. Quando scriverai qualcosa nel campo di input e poi passerai a un altro file o elemento, il testo di quel campo cambierà solo con lettere maiuscole. Indipendentemente dal testo digitato dall'utente in maiuscolo o minuscolo completo:

Segui questo codice:

Passaggio 1: chiama la libreria jquery in html head:

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

Passaggio 2: scrivere il codice per modificare il testo dei campi di input:

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

Step-3: Crea campi di input HTML con gli stessi ID che usi nel codice jquery come:

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

L'id di questo campo di input è: edit-submit-first-name (usando nel codice jquery nel passaggio 2)

** Risultato: assicurarsi che il testo cambierà dopo aver spostato lo stato attivo da quel campo di input a un altro elemento. Perché stiamo usando l'evento focus out di jquery qui. Il risultato dovrebbe essere così: Tipo di utente: "grazie" cambierà con "Grazie". **

Buona fortuna

La soluzione PHP, in backend:

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

So che questa è una risposta tardiva, ma se vuoi confrontare le prestazioni di varie soluzioni ho un jsPerf che ho creato.

Le soluzioni Regex sono sicuramente le più veloci.

Ecco il jsPerf: https://jsperf.com/capitalize-jwaz

Ci sono 2 soluzioni regex.

Il primo usa /\b[a-z]/g. Il limite di parole renderà maiuscole le parole come non divulgazione alla non divulgazione.

Se vuoi solo scrivere in maiuscolo lettere precedute da uno spazio, usa la seconda regex

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

se stai usando jQuery; questo è un modo per farlo:

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

Ecco una versione più facile da leggere che fa la stessa cosa:

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

dimostrazione

tutto sbagliato esiste -> variante-font: small-caps;

text-transform: capitalizzare; solo il cappuccio della prima lettera