Rendi il primo carattere maiuscolo in CSS

255

C'è un modo per rendere il primo carattere maiuscolo in un'etichetta in CSS.

Ecco il mio HTML:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>

Espandi frammento

css

— Enjoylife
fonte

2

Per specificare: il primo carattere e SOLO il primo. Il che rende il text-transform: capitalize;non abbastanza quando si hanno più parole

— wiktus239

622

C'è una proprietà per questo:

a.m_title {
    text-transform: capitalize;
}

Se i tuoi collegamenti possono contenere più parole e vuoi solo che la prima lettera della prima parola sia maiuscola, usa :first-letterinvece una trasformazione diversa (anche se non ha molta importanza). Nota che, per :first-letterfunzionare tuoi aelementi devono essere contenitori di blocco (che può essere display: block, display: inline-blocko qualsiasi di una varietà di altre combinazioni di una o più proprietà):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

— BoltClock
fonte

3

@alanjds: Sì, funziona in tutte le versioni di IE che supportano CSS. È una tecnologia molto antica.

— BoltClock

3

potresti voler usare un doppio punto e virgola, vedi css-tricks.com/almanac/selectors/f/first-letter

— ndequeker l'

5

@Voli: certo se non è necessario supportare IE8 e versioni precedenti. Non dire che non potresti usare i doppi punti, se lo desideri. (Per quello che vale, al momento di questa risposta che è stata pubblicata 2 anni e mezzo fa, la mia politica personale era di supportare IE8 di default. Oggi non lo faccio più.)

— BoltClock

1

Nota, se il display: blockrequisito (chissà perché) lo rende difficile, :first-letterfunziona anche con display: inline-block.

— Mitya,

1

@Henry Garcia De Guzman: Perché questo mette in maiuscolo tutto, non solo la prima lettera (di ogni parola o frase o altro).

— BoltClock

55

Si noti che il ::first-letterselettore non funziona con elementi incorporati, quindi deve essere uno blocko inline-block, come segue:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

— Logus
fonte

1

Nel mio caso l'intero testo era già in maiuscolo, quindi ho dovuto aggiungere text-transform: minuscolo a .m_title e ora funziona perfettamente!

— hjuster

34

CSS: selettore della prima lettera

o :

text-transform: capitalize;

— Amr Elgarhy
fonte

15

Suggerisco di usare

#selector {
    text-transform: capitalize;
}

o

#selector::first-letter {
    text-transform: uppercase;
}

A proposito, controlla questo link w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

— Maurizio Battaghini
fonte

2

Buona risposta, ma sicuramente non è un collegamento alla documentazione di W3C.

— Stephan,

1

Ehi, per favore nota: la trasformazione del testo 'iniziale' non significa 'maiuscola prima lettera'. Piuttosto, significa "ripristinare il valore predefinito iniziale per questa proprietà".

— Marcos Buarque,

Grazie, ho applicato entrambe le correzioni consigliate.

— Marcos Buarque,

5

Renderlo prima in minuscolo:

.m_title {text-transform: lowercase}

Quindi imposta la prima lettera maiuscola:

.m_title:first-letter {text-transform: uppercase}

"text-transform: capitalize" funziona per una parola; ma se vuoi usare le frasi questa soluzione è perfetta.

— OzgurG
fonte

2

: la prima lettera non funziona con gli inlineelementi, impostare su display:inline-blockse questo è il tuo caso. ( Stackoverflow.com/questions/7631722/... )

— Fanky

1

<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

— Gnana Sekar
fonte

mi funziona. concetto ..paragrafo ogni parola in mostra maiuscole

— Gnana Sekar

-2

Consiglierei di utilizzare il seguente codice nei CSS:

    text-transform:uppercase;

Assicurati di inserirlo nella tua classe.

— Kevin Davis
fonte