CSS text-transform Eigenschaft
Die text-transform Eigenschaft steuert die Großschreibung von Textelementen. Alle Werte mit Beispielen erklärt.
Die CSS-Eigenschaft text-transform steuert die Großschreibung des Textes eines Elements — sie kann Text in GROSSBUCHSTABEN, in Kleinbuchstaben oder mit Großem Anfangsbuchstaben Jedes Wortes erzwingen, ohne das zugrunde liegende HTML zu verändern. Es handelt sich dabei ausschließlich um eine visuelle Änderung: Der Quelltext bleibt genau so, wie Sie ihn geschrieben haben — Screenreader, Kopieren und Einfügen sowie Formulareingaben sehen weiterhin die ursprüngliche Schreibweise.
Diese Seite behandelt jeden Wert von text-transform, die Fallstricke des capitalize-Werts, sprachspezifische Groß-/Kleinschreibungsregeln und ausführbare Beispiele für jeden Wert.
Warum text-transform statt manueller Eingabe der Schreibweise?
Die Schreibweise im CSS statt im Markup zu verwalten hält Ihre Inhalte sauber und flexibel:
- Eine einzige Quelle der Wahrheit. Schreiben Sie Überschriften und Beschriftungen in normaler Satzzschreibweise; lassen Sie CSS sie nur dort in Großbuchstaben umwandeln, wo das Design es verlangt. Ändern Sie das Design später an einer einzigen Stelle.
- Lokalisierungsfreundlich. Übersetzer bearbeiten lesbaren Text, keine schreienden Großbuchstaben.
- Barrierefreiheit & SEO. Suchmaschinen und Hilfstechnologien lesen den echten Text, nicht die gestalteten Glyphen. Ein
<button>-Label visuell in Großbuchstaben darzustellen gibt dem Element trotzdem einen normal geschriebenen zugänglichen Namen.
Sprachspezifische Groß-/Kleinschreibungsregeln
text-transform folgt den Groß-/Kleinschreibungsregeln der Sprache des Inhalts (dem lang-Attribut), nicht einer einfachen ASCII-Konvertierung. Einige bemerkenswerte Fälle:
- Turkische Sprachen — Türkisch (
tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolgatatarisch (tt) und Baschkirisch (ba) haben punktiertes und punktloses i mit zwei Groß-/Kleinschreibungspaaren: i/İ und ı/I. - Deutsch (
de) — das ß wird im Großbuchstabenmodus zu SS. - Griechisch (
el) — wenn ein ganzes Wort in Großbuchstaben umgewandelt wird, entfällt der Vokalakzent (ά → Α), außer beim disjunktiven Eta (ή/Ή).
Die Browserunterstützung für diese sprachspezifischen Regeln variiert, daher sollten Sie testen, ob Ihre Zielgruppe darauf angewiesen ist.
Die Werte full-width und full-size-kana sind experimentell. full-width wird von WebKit teilweise unterstützt, während full-size-kana nur sehr begrenzte Unterstützung hat.
| Ausgangswert | none |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM Syntax | object.style.textTransform = "capitalize"; |
Syntax
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Der Wert "uppercase"
uppercase wandelt jedes Zeichen in seine Großbuchstabenform um — die häufigste Verwendung sind Überschriften, Schaltflächen und Beschriftungen. Im folgenden Beispiel werden der Absatz und der <div>-Text in Großbuchstaben umgewandelt, während das HTML seine normale Schreibweise beibehält:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<p>This is some paragraph.</p>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Ergebnis
Die Werte "capitalize" und "lowercase"
capitalize schreibt den ersten Buchstaben jedes Wortes groß und lässt den Rest jedes Wortes unverändert. Eine „Wortgrenze" ist jedes Leerzeichen, jede Interpunktion oder jedes Symbol, sodass Anführungszeichen und Bindestriche ebenfalls neue Wörter beginnen (z. B. wird aus mother-in-law Mother-In-Law). Zwei häufige Fallstricke:
- Es wird nur der erste Buchstabe berührt —
iPhonebleibtIPhone, nichtIphone, da die vorhandene Schreibweise der restlichen Buchstaben erhalten bleibt. - Eine Ziffer gilt nicht als Buchstabe, sodass der erste Buchstabe nach einer Zahl nicht großgeschrieben wird.
3rdbleibt3rd, niemals3Rd.
lowercase ist das Gegenteil von uppercase: Es erzwingt die Kleinschreibung jedes Zeichens. Im folgenden Beispiel verwendet das erste <div> capitalize und das zweite lowercase:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
text-transform: capitalize
}
.b {
text-transform: lowercase
}
</style>
</head>
<body>
<h2>Text-transform property example</h2>
<div class="a">"Text transform property"</div>
<br />
<div class="b">
"THIS IS SOME PARAGRAPH FOR EXAMPLE".
</div>
</body>
</html>Der Wert "none"
none ist der Standardwert — Text wird genau so angezeigt, wie er geschrieben wurde, ohne Groß-/Kleinschreibungseffekte. Sie verwenden ihn hauptsächlich, um eine text-transform-Angabe zu aufzuheben, die ein Element andernfalls erben würde, da die Eigenschaft standardmäßig vererbt wird.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
h2 {
text-transform: none;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>
Example of the text-transform property with the "none" value:
</h2>
</body>
</html>Der Wert "initial"
initial setzt die Eigenschaft auf ihren CSS-definierten Standardwert (none) zurück, unabhängig von einem vererbten Wert. Das folgende Beispiel setzt text-transform auf einem Absatz zurück:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: red;
}
p.text {
text-transform: initial;
}
</style>
</head>
<body>
<h1>Example with text-transform property</h1>
<h2>text-transform: initial:</h2>
<p class="text">
Example of the text-transform property with the "initial" value:
</p>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Keine Groß-/Kleinschreibungseffekte. Dies ist der Standardwert der Eigenschaft. | Ausprobieren » |
| capitalize | Schreibt das erste Zeichen jedes Wortes groß. | Ausprobieren » |
| uppercase | Schreibt alle Zeichen jedes Wortes groß. | Ausprobieren » |
| lowercase | Schreibt alle Zeichen jedes Wortes klein. | Ausprobieren » |
| full-width | Schreibt ein Zeichen (Ideogramme und lateinische Schriften) in einem Quadrat, sodass es an chinesischen oder japanischen Texten ausgerichtet werden kann. | Ausprobieren » |
| full-size-kana | Wandelt alle kleinen Kana-Zeichen in vollgroße Kana-Zeichen um, um Lesbarkeitsprobleme bei den kleinen Schriftgrößen auszugleichen, die typischerweise in Ruby-Annotationen verwendet werden. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
text-transform ist eines von mehreren CSS-Werkzeugen zur Gestaltung der Textdarstellung. Kombinieren Sie es mit diesen verwandten Eigenschaften:
- text-decoration — Unterstreichung, Überstreichung oder Durchstreichung von Text.
- font-variant — Text als Kapitälchen darstellen (eine echte typografische Variante, im Gegensatz zur visuellen Großschreibung).
- letter-spacing und word-spacing — passt gut zu großgeschriebenen Überschriften, die oft mit zusätzlichem Zeichenabstand besser lesbar sind.
- text-align — horizontale Ausrichtung des umgewandelten Textes steuern.
- ::first-letter und ::first-line —
text-transformgilt auch für diese Pseudo-Elemente, nützlich für Initialen-Effekte.