Machen Sie das erste Großbuchstaben in CSS

255

Gibt es eine Möglichkeit, das erste Großbuchstaben in einem Label in CSS zu setzen ?

Hier ist mein 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>
Erweitern Sie das Snippet

css genieße das Leben
quelle
2
Zu spezifizieren - das erste Zeichen und NUR das erste. Was macht das text-transform: capitalize;nicht genug, wenn Sie mehrere Wörter haben
wiktus239

Antworten:

622

Dafür gibt es eine Eigenschaft:

a.m_title {
    text-transform: capitalize;
}

Wenn Ihre Links mehrere Wörter enthalten können und Sie nur möchten, dass der erste Buchstabe des ersten Wortes in Großbuchstaben geschrieben wird, verwenden Sie :first-letterstattdessen eine andere Transformation (obwohl dies nicht wirklich wichtig ist). Beachten Sie, dass , um für :first-letterIhre Arbeit aElemente Block Container sein müssen (was sein kann display: block, display: inline-blockoder eine beliebige einer Vielzahl von anderen Kombinationen von einer oder mehreren Eigenschaften):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}
BoltClock
quelle
3
@alanjds: Ja, es funktioniert in jeder Version von IE, die CSS unterstützt. Es ist eine sehr alte Technologie.
BoltClock
3
Vielleicht möchten Sie ein Doppel- Semikolon verwenden
ndequeker
5
@Voles: Sicher, wenn Sie IE8 und älter nicht unterstützen müssen. Ohne zu sagen, dass Sie keine Doppelpunkte verwenden könnten, wenn Sie wollten. (Für was es wert ist , zu dem Zeitpunkt dieser Antwort , die vor 2 ½ Jahren geschrieben wurde, meine persönliche Politik war IE8 standardmäßig zu unterstützen Heute habe ich nicht mehr..)
BoltClock
1
Beachten Sie, wenn die display: blockAnforderung (wer weiß, warum das so ist) dies schwierig macht, :first-letterfunktioniert auch mit display: inline-block.
Mitya
1
@ Henry Garcia De Guzman: Weil das alles in Großbuchstaben schreibt, nicht nur den ersten Buchstaben (jedes Wortes oder Satzes oder was auch immer).
BoltClock
55

Beachten Sie, dass der ::first-letterSelektor nicht mit Inline-Elementen funktioniert. Daher muss er entweder blockoder inline-blockwie folgt sein:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Logus
quelle
1
In meinem Fall war der gesamte Text bereits in Großbuchstaben, also musste ich Texttransformation hinzufügen: Kleinbuchstaben zu .m_title und jetzt funktioniert es perfekt!
hjuster
15

Ich schlage vor, zu verwenden

#selector {
    text-transform: capitalize;
}

oder

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

Überprüfen Sie übrigens diesen Link zu w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Maurizio Battaghini
quelle
2
Gute Antwort, aber das ist definitiv kein Link zur w3c-Dokumentation.
Stephan
1
Hey, bitte beachten Sie: Texttransformation 'Initiale' bedeutet nicht 'Großschreibung des ersten Buchstabens'. Es bedeutet vielmehr "zum ursprünglichen Standardwert für diese Eigenschaft zurückkehren".
Marcos Buarque
Vielen Dank, ich habe beide empfohlenen Korrekturen angewendet.
Marcos Buarque
5

Machen Sie es zuerst in Kleinbuchstaben:

.m_title {text-transform: lowercase}

Dann machen Sie es zum ersten Großbuchstaben:

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

"text-transform: großschreiben" funktioniert für ein Wort; Aber wenn Sie für Sätze verwenden möchten, ist diese Lösung perfekt.

OzgurG
quelle
2
: Der erste Buchstabe funktioniert nicht mit inlineElementen. Stellen Sie ein, display:inline-blockob dies der Fall ist. ( 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
quelle
Es ist Arbeit für mich. Konzept .. Absatz jedes Wort in Anzeige Anfangsbuchstaben Kappen
Gnana Sekar
-2

Ich würde empfehlen, dass Sie den folgenden Code in CSS verwenden:

    text-transform:uppercase;

Stellen Sie sicher, dass Sie es in Ihre Klasse setzen.

Kevin Davis
quelle