CSS-Property text-transform
Die Eigenschaft text-transform wird verwendet, um Text in Großbuchstaben oder Kleinbuchstaben darzustellen oder den ersten Buchstaben jedes Wortes großzuschreiben.
Bei dieser Eigenschaft werden einige sprachspezifische Regeln zur Groß-/Kleinschreibung berücksichtigt. Sehen wir uns einige davon an:
- In turkischen Sprachen wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Wolgatatarisch (tt) und Baschkirisch (ba) gibt es zwei Arten von i, mit und ohne Punkt, sowie die folgenden zwei Zuordnungen: i/İ und ı/I.
- In der deutschen Sprache (de) wird ß in Großschreibung zu SS.
- In der griechischen Sprache (el) geht bei der Großschreibung des ganzen Wortes (ά/Α) der Vokalakzent verloren, außer beim disjunktiven Eta (ή/Ή).
Die Browser-Unterstützung für sprachspezifische Fälle kann variieren.
WARNING
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 eingeschränkt unterstützt wird.
| Initial Value | none |
|---|---|
| Applies to | Alle Elemente. Sie gilt auch für ::first-letter und ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.textTransform = "capitalize"; |
Syntax
Syntax der CSS-Eigenschaft text-transform
text-transform: none | capitalize | uppercase | lowercase | full-width | full-size-kana | initial | inherit;Beispiel für die Eigenschaft text-transform mit dem Wert "uppercase":
Beispiel der CSS-Eigenschaft text-transform mit dem Wert uppercase
<!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
Der Wert "capitalize"
Der Wert "capitalize" der Eigenschaft text-transform schreibt die Wörter innerhalb einfacher oder doppelter Anführungszeichen groß, ebenso wie den ersten Buchstaben nach einem Bindestrich. Der erste Buchstabe nach einer Zahl wird nicht großgeschrieben. Datumsangaben wie „January 3th, 2019“ werden also nicht zu „January 3Th, 2019“. Dieser Wert schreibt nur die ersten Buchstaben des Wortes groß, die übrigen Buchstaben im Wort ändern sich nicht.
Im folgenden Beispiel haben wir den Wert "capitalize" für den ersten Satz und den Wert "lowercase" für den zweiten Satz verwendet:
Beispiel für die Eigenschaft text-transform mit den Werten "capitalize" und "lowercase":
Beispiel der CSS-Eigenschaft text-transform mit den Werten capitalize und 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>Beispiel für die Eigenschaft text-transform mit dem Wert "none":
Beispiel der Eigenschaft text-transform mit dem Wert "none":
<!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>Beispiel für die Eigenschaft text-transform mit dem Wert "initial”:
Beispiel der Eigenschaft text-transform mit dem Wert "initial”:
<!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
| Value | Descriptions | Play it |
|---|---|---|
| none | Keine Großschreibungseffekte. Dies ist der Standardwert dieser Eigenschaft. | Play it » |
| capitalize | Macht das erste Zeichen jedes Wortes groß. | Play it » |
| uppercase | Macht alle Zeichen jedes Wortes groß. | Play it » |
| lowercase | Macht alle Zeichen jedes Wortes klein. | Play it » |
| full-width | Setzt die Darstellung eines Zeichens (Ideogramme und lateinische Schriften) in ein Quadrat, sodass sie in Chinesisch oder Japanisch ausgerichtet werden können. | Play it » |
| full-size-kana | Wandelt alle kleinen Kana-Zeichen in die volle Kana-Größe um, um Lesbarkeitsprobleme bei kleinen Schriftgrößen auszugleichen, die typischerweise in Ruby verwendet werden. | Play it » |
| initial | Verwendet den Standardwert der Eigenschaft. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
How do you make each word in a text start with a capital letter?