---
title: text-transform
slug: Web/CSS/text-transform
translation_of: Web/CSS/text-transform
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Übersicht</h2>

<p>Das <code>text-transform</code> CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.</p>

<div class="note">
<p>Das <code>text-transform</code> Attribut berücksichtigt sprachspezifische Regeln:</p>

<ul>
 <li>in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: <code>i</code>/<code>İ</code> and <code>ı</code>/<code>I</code>.</li>
 <li>auf Deutsch (de) wird das <code>ß</code> in der Großschreibung zu <code>SS</code>.</li>
 <li>auf Niederländisch (nl) wird der Digraph <code>ij</code> auch bei <code style="font-size: 14px;">text-transform: capitalize</code> zu <code>IJ</code>.</li>
 <li>auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (<code>ά</code>/<code>Α</code>), außer beim Eta (<code>ή</code>/<code>Ή</code>). Doppelvokale mit einem Akzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (<code>άι</code>/<code>ΑΪ</code>).</li>
 <li>auf Griechisch (el) hat das kleine Sigma zwei Formen: <code style="font-size: 14px;">σ</code> and <code style="font-size: 14px;">ς</code>. <code style="font-size: 14px;">ς</code> wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird <code style="font-size: 14px;">text-transform: lowercase</code> auf ein großes Sigma (<span style="font-family: courier new,andale mono,monospace; line-height: normal;">Σ</span>) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.</li>
</ul>

<p>Die Sprache wird durch das <code>lang</code> HTML Attribut oder das <code>xml:lang</code> XML Attribut festgelegt..</p>

<p>Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der <a href="/en-US/docs/CSS/text-transform#Browser_compatibility" title="CSS/text-transform#Browser_compatibility">Kompatibilitätstabelle</a>.</p>
</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("text-transform")}}
</pre>

<pre>text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none
text-transform: full-width

text-transform: inherit
</pre>

<h3 id="Values" name="Values">Werte</h3>

<dl>
 <dt><code>capitalize</code></dt>
 <dd>Ein Schlüsselwort, dass die Großschreibung des Anfachsbuchstaben jedes Wortes erzwingt. Geändert werden alle Unicode-basierten Zeichen außer Symbole. Dabei bleiben alle anderen Zeichen unverändert.</dd>
 <dd>
 <div class="note">Bei der automatischen Großschreibung sollte je nach Sprache die Kompatibilität beachtet und überprüft werden. </div>
 </dd>
 <dt><code>uppercase</code></dt>
 <dd>Wendet die Großschreibung auf alle Zeichen an.</dd>
 <dt><code>lowercase</code></dt>
 <dd>Erzwingt die Kleinschreibung aller Zeichen.</dd>
 <dt><code>none</code></dt>
 <dd>Verhindert Änderungen; alle Buchstaben bleiben unverändert.</dd>
 <dt><code>full-width</code> {{experimental_inline}}</dt>
 <dd>Erzwingt das Rendern der Buchstaben als rechteckige Form, was z.B. die Interaktion mit ostasiatischen Sprachen (z.B. Chinesisch oder Japanisch) erlaubt.</dd>
</dl>

<h2 id="Examples" name="Examples">Beispiele</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2"><code>p { text-transform: none; }</code></td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2"><code>p { text-transform: capitalize; }</code></td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: capitalize;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2">
    <p><code>p { text-transform: capitalize; }</code></p>

    <p>Die Großschreibung beginnt bei Zeichen, die nach Unicode der Buchstabenkategorie angehören.</p>
   </td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: capitalize;">(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>(This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2">
    <p><code>p { text-transform: capitalize; }</code></p>

    <p>Symbole werden ignoriert. Auch hier wird erst der erste gefundene Buchstabe in einer Zeichenkette großgeschrieben.</p>
   </td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td style="text-transform: capitalize;"><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2"><code>p { text-transform: capitalize; }</code><br>
    Das dänische Digraph <code>ij </code>muss wie ein einzelnes Zeichen behandelt werden.</td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td style="text-transform: capitalize;"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>The Dutch Word: "IJsland" Starts With A Digraph.</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2"><code>p { text-transform: uppercase; }</code></td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: uppercase;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table" lang="el">
 <tbody>
  <tr>
   <td colspan="2">
    <p><code>p { text-transform: uppercase; }</code></p>

    <p>Bei Griechischen Vokalen sollte, außer bei einem trennenden <code>eta</code>, auf Akzente verzichtet werden. Bei der Großschreibung eines ersten Vokals mit Akzent kommt es bei zwei direkt aufeinander folgenden Vokalen zu einer Diaräse.</p>
   </td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: uppercase;">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>ΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2"><code>p { text-transform: lowercase; }</code></td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: lowercase;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2">
    <p><code>p { text-transform: lowercase; }</code></p>

    <p>Der griechische Buchstabe Sigma (<font face="Consolas">Σ</font>) wird je nach Kontext in ein kleingeschriebenes Sigma (<font face="Consolas">σ</font>) oder die entsprechene Wortvariante (<font face="Consolas">ς</font>) umgewandelt.</p>
   </td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><code style="text-transform: lowercase;">Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td><code>σ is a greek letter that appears several times in </code><code style="text-transform: lowercase;">ΟΔΥΣΣΕΥ</code><code>ς.</code></td>
  </tr>
 </tbody>
</table>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="2"><code>p { text-transform: full-width; }</code><br>
    Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.</td>
  </tr>
  <tr>
   <td>Zeichenkette</td>
   <td>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~</td>
  </tr>
  <tr>
   <td>Echtzeitbeispiel</td>
   <td><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&amp;()*+,-./:;&lt;=&gt;?@{|}~</span></td>
  </tr>
  <tr>
   <td>Referenzwert</td>
   <td>０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications" name="Specifications">Details</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentrar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td>
   <td>{{Spec2('CSS4 Text')}}</td>
   <td>Aus{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} :Fügt das Schlüsselwort <code>full-size-kana</code> hinzu und erlaubt die Kombination von Schlüsselwörtern mit <code>full-width</code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>
    <p>Aus {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} : Mehr Zahlen und Buchstaben können verwendet werden. Das Schlüsselwort <font face="Consolas">capitalize</font> aktiviert die Großschreibung nur beim <em>ersten unterstützten </em>Zeichen eines Wortes; andere Zeichen werden ignoriert. Erhöhung der Kompatibilität des Schlüsselwortes <font face="Consolas">full-width.</font></p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Aus {{SpecName('CSS1', '#text-transform', 'text-transform')}} : Ergänzung des Umfangs an unterstützten Zeichen um einige nicht-lateinische Buchstaben</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Grundfunktionalität</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>capitalize</code> (CSS3 version)</td>
   <td>siehe Bemerkung</td>
   <td>{{CompatGeckoDesktop("14")}} (siehe Bemerkung)</td>
   <td>siehe Bemerkung</td>
   <td>{{CompatUnknown}}</td>
   <td>siehe Bemerkung</td>
  </tr>
  <tr>
   <td><code>full-size-kana</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>full-width</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("19")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>ß</code> → <code>SS</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("14")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Dänisches <code>IJ D</code>igraph</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("14")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Griech. Zeichen mit Akzent</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("15")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Σ</code> → <code>σ</code> bzw. <code>ς</code></td>
   <td>30</td>
   <td>{{CompatGeckoDesktop("14")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>6.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Grundfunktionalität</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>capitalize</code> (CSS3 version)</td>
   <td>siehe Bemerkung</td>
   <td>{{CompatGeckoMobile("14")}} siehe Bemerkung</td>
   <td>siehe Bemerkung</td>
   <td>{{CompatUnknown}}</td>
   <td>siehe Bemerkung</td>
  </tr>
  <tr>
   <td><code>full-size-kana</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>full-width</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("19")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>ß</code> → <code>SS</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>i</code> → <code>İ</code> and <code>ı</code> → <code>I</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Dänisches <code>IJ D</code>igraph</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Griech. Zeichen mit Akzent</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>Σ</code> → <code>σ</code> bzw. <code>ς</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("14")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Browser_notes" name="Browser_notes">Browserinformationen</h3>

<p>Das capitalize Schlüsselwort wurde in CSS1 bzw. CSS 2.1 nicht eindeutig spezifiziert. Dadurch wurde der erste großzuschreibende Buchstabe unterschiedlich ermittelt. Sowohl Webkit-basierte Browser als auch die Gecko Engine identifizierte Symbole fälschlicherwiese als Buchstaben. Beispielsweise galten bei Firefox <code>- </code>respektive <code>_</code> als Buchstaben. Internet Explorer 9 hielt sich den Spezifikationen insgesamt am nächsten. Mit CSS3 wurde das Verhalten vereinheitlicht. Der Kompatibilitätstabelle können die Browserversionen entnommen werden, mit denen der Standard erstmals exakt umgesetzt wurde.</p>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{cssxref("font-variant")}}</li>
</ul>