DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft text-transform in CSS steuert Groß- und Kleinschreibung sowie die Kapitalisierung von Text.
.lowercase {
text-transform: lowercase;
}Text-Transform-Werte
lowercasewandelt alle Buchstaben im ausgewählten Text in Kleinbuchstaben um.uppercasewandelt alle Buchstaben im ausgewählten Text in Großbuchstaben um.capitalizeschreibt den ersten Buchstaben jedes Wortes im ausgewählten Text groß.nonebelässt die Groß- und Kleinschreibung sowie die Kapitalisierung des Textes genau so, wie sie eingegeben wurde.inheritübernimmt die Groß- und Kleinschreibung sowie die Kapitalisierung des übergeordneten Elements.
Die folgende Demo zeigt lowercase, uppercase und capitalize in Aktion. Schauen Sie sich den HTML-Tab an, um zu sehen, wie der Text ursprünglich geschrieben wurde, und wechseln Sie dann zurück zum Ergebnisse-Tab, um ihn nach Anwendung der CSS zu sehen.
Siehe den Pen 0f4293fce0d14aafc3818c950ab0ded3 von mariemosley (@mariemosley) auf CodePen.
Interessante Punkte
capitalize schreibt Wörter, die in einfachen oder doppelten Anführungszeichen stehen, und den ersten Buchstaben nach einem Bindestrich groß. Es schreibt den ersten Buchstaben nach einer Zahl nicht groß, daher werden Daten wie "February 4th, 2015" nicht zu "February 4Th, 2015".
capitalize wirkt sich nur auf die ersten Buchstaben von Wörtern aus. Es ändert nicht die Groß- und Kleinschreibung der restlichen Buchstaben eines Wortes. Wenn Sie zum Beispiel ein Wort, das bereits in Großbuchstaben geschrieben ist, mit capitalize umwandeln, werden die anderen Buchstaben im Wort nicht in Kleinbuchstaben umgewandelt. Das ist nützlich, wenn Ihr Text Akronyme oder Abkürzungen enthält, die keine Kleinbuchstaben enthalten sollten.
CSS kann keinen "Title Case" (Großschreibung von Titeln), den Schreibstil, der in Titeln von Büchern, Filmen, Liedern und Gedichten verwendet wird, bei dem Artikel kleingeschrieben werden (wie in "Raiders of the Lost Ark"). Aber es gibt JavaScript-Lösungen für Title Case, einschließlich David Gouchs toTitleCase().
Verwandte Eigenschaften
Weitere Informationen
- text-transform bei MDN
- text-transform in der W3C Spec
- Hinweise zur Barrierefreiheit von Großbuchstabentext von WebAIM
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle | Alle | Alle |
Firefox unterstützt sprachspezifische Regeln für die Kapitalisierung für Turksprachen, Deutsch, Niederländisch und Griechisch, die von anderen Browsern nicht unterstützt werden. Firefox ist auch der einzige Browser, der text-transform: full-width; unterstützt, was die Lesbarkeit von Texten mit einer Mischung aus lateinischen und ostasiatischen Schriften verbessern kann. Details finden Sie bei MDN.
Wenn Inhalte in Großbuchstaben eingegeben werden und die Benutzeroberfläche großgeschrieben werden soll, funktioniert capitalize nicht, wie Chris anmerkt. Wie können Großbuchstaben in großgeschriebene Wörter mit CSS geändert werden, ohne das CMS zu öffnen und den Text zu ändern? Ich habe versucht, den Text in ein übergeordnetes span zu packen, diesen kleinzuschreiben und dann das untergeordnete span zu kapitalisieren, aber das hat aus offensichtlichen Gründen nicht funktioniert – es war aber eine dieser „versuchen wir es mal“-Ideen.
Verwenden Sie text-transform: uppercase für den ersten Buchstaben und text-transform: lowercase für den Rest.
element:first-letter {text-transform:uppercase}
element {text-transform:lowercase}
Ich habe das versucht
element:first-letter {text-transform:uppercase}
element {text-transform:lowercase}
aber das funktioniert nicht. Es werden alle Buchstaben zu Kleinbuchstaben.
@Samuel. Das hat funktioniert, als die Buchstaben im Quelltext großgeschrieben waren. Getestet in Chrome. In welchem Browser versuchen Sie es? Es ist browserübergreifend kompatibel, sollte also in Ordnung sein: http://caniuse.com/#search=first-letter
@samuel
Nur zur Klarstellung
selector:first-letter {}1x : funktioniert nicht, da dies versucht, eine Pseudoklasse anzusprechen.Es muss sein
selector::first-letter {}2x :, was das Pseudoelement „first-letter“ anspricht.Joes Schnipsel hat die korrekte **::**-Schreibweise.
Die Browserunterstützung muss hier korrigiert werden.
Der Wert „initial“ wird in IE11 und älteren Versionen nicht unterstützt. Stattdessen können wir den Wert „none“ setzen, der in allen gängigen Browsern funktioniert.
@JOE, ich habe ein ähnliches Problem wie Sie. Die Eingabedaten sind alle Großbuchstaben, die ich mit CSS text-transform:capitalize in Camel Case/Title Case umwandle, nachdem ich sie in Kleinbuchstaben umgewandelt habe. Das Problem ist nun, dass einige Abkürzungen und Akronyme wie "US" oder "U.S." ebenfalls diese Transformation durchlaufen. Dies sollte vermieden werden. Haben Sie Ideen oder Vorschläge?
Ich wünschte, es gäbe einen "Satzfall", damit ich riesige Blöcke von Großbuchstabentexten in angenehm lesbare Sätze mit nur dem ersten Buchstaben des ersten Wortes umwandeln könnte. Vielleicht in der nächsten Version von CSS? (Finger kreuzen...)
Versuchen Sie dies...
.item {
text-transform: lowercase;
}
item:first-letter {
text-transform: capitalize;
}
Wenn die Anzeige inline ist, funktioniert das Obige nicht.
Sehr nützlicher Kommentar ++. Ich habe dies gerade einem span hinzugefügt und display: inline-block darauf angewendet, was in meinem Fall weitere Vorteile hatte.
CHRIS COYIER – Sie SIND der Mann! Sie helfen mir täglich mit Ihren „CSS Tricks“. Vielen Dank für Ihre Einblicke – wie immer.
Es sieht so aus, als ob in Firefox bei zusammengesetzten Wörtern nur das erste Wort großgeschrieben wird, z. B. Double-parked, nicht Double-Parked.
Ein weiterer interessanter Punkt ist, dass alles in () ebenfalls großgeschrieben wird, was bedeutet, dass "grade level(s)" zu "Grade Level(S)" wird : (
Ich denke, die Reihenfolge ist wichtig. Machen Sie
element {text-transform:lowercase}zur ersten unddanach
Wie gehen wir mit Dingen wie "McTavish" oder O'Brien um?