CSS text-transform Eigenschaft

Definition und Verwendung

Die Eigenschaft text-transform kontrolliert die Groß- und Kleinschreibung des Textes.

Erklärung

Diese Eigenschaft ändert die Groß- und Kleinschreibung der Buchstaben im Element, unabhängig von der Groß- und Kleinschreibung des Textes im Quelldokument. Wenn der Wert auf "capitalize" gesetzt ist, müssen bestimmte Buchstaben großgeschrieben werden, aber es ist nicht definiert, wie bestimmt wird, welche Buchstaben großgeschrieben werden sollen, was von dem Benutzeragenten abhängt, der die "Wörter" erkennt.

Siehe auch:

CSS-Tutorial:CSS Text

HTML DOM Referenzhandbuch:textTransform-Eigenschaft

Beispiel

Konvertieren Sie den Text in verschiedenen Elementen:

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

Versuchen Sie es selbst

Hinweise und Anmerkungen

Anmerkung:Verschiedene Benutzeragenten können unterschiedliche Methoden verwenden, um zu bestimmen, wo ein Wort beginnt und welche Buchstaben großgeschrieben werden sollen. Zum Beispiel kann der Text "w3-school" auf zwei Arten dargestellt werden: "W3-school" und "W3-School". CSS schreibt nicht vor, welche Art korrekt ist, daher sind beide Möglichkeiten in Ordnung.

CSS-Syntax

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Eigenschaftswert

Wert Beschreibung
keine Standard. Definiert einen Standardtext mit Klein- und Großbuchstaben.
capitalize Jedes Wort im Text beginnt mit einem Großbuchstaben.
uppercase Definiert, dass nur Großbuchstaben verwendet werden.
lowercase Definiert, dass nur Kleinbuchstaben verwendet werden.
inherit Legt fest, dass der Wert der Eigenschaft text-transform vom übergeordneten Element geerbt wird.

Technische Details

Standardwert: keine
Vererbbarkeit: ja
Version: CSS1
JavaScript-Syntax: object.style.textTransform="uppercase"

Mehr Beispiele

Kontrolle der Groß- und Kleinschreibung im Text
Dieses Beispiel zeigt, wie man die Groß- und Kleinschreibung der Buchstaben im Text kontrolliert.

Browser-Unterstützung

Die Zahlen in der Tabelle verweisen auf die erste Browser-Version, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0