text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25172
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 70 words added, 24 words removed

Revision Content

{{ CSSRef() }}

Summary

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

text-transform:  none | [ [capitalize | uppercase | lowercase ] || full-width || full-size-kana ] 

Values

capitalize
Is a keyword forcing the first letter of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general category {{ experimental_inline() }}.
uppercase
Is a keyword forcing all characters to be converted to uppercase.
lowercase
Is a keyword forcing all characters to be converted to lowercase.
none
Is a keyword preventing the case of all characters to be changed.

Examples

p { text-transform: none; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p { text-transform: capitalize; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p { text-transform: uppercase; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p { text-transform: lowercase; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

Specifications

See also

  • {{ cssxref("font-variant") }}
  • {{ CSS_Reference:Text() }}

{{ languages( {"fr": "fr/CSS/text-transform" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>text-transform</code> CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre class="eval">text-transform:  none | [ [capitalize | uppercase | lowercase ] || full-width || full-size-kana ] 
</pre>
<h3>Values</h3>
<dl> <dt><code>capitalize</code></dt> <dd>Is a keyword forcing the first <em>letter</em> of each word to be converted to uppercase. Other characters are unchanged; that is, they retain their original case as written in the element's text. A letter is any Unicode character part of the Letter or Number general category {{ experimental_inline() }}.</dd> <dt><code>uppercase</code></dt> <dd>Is a keyword forcing all characters to be converted to uppercase.</dd> <dt><code>lowercase</code></dt> <dd>Is a keyword forcing all characters to be converted to lowercase.</dd> <dt><code>none</code></dt> <dd>Is a keyword preventing the case of all characters to be changed.</dd>
</dl>
<h2>Examples</h2>
<pre>p { text-transform: none; }
</pre>
<p style="text-transform: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<pre>p { text-transform: capitalize; }
</pre>
<p style="text-transform: capitalize">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<pre>p { text-transform: uppercase; }
</pre>
<p style="text-transform: uppercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<pre>p { text-transform: lowercase; }
</pre>
<p style="text-transform: lowercase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Browser compatibility</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>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</td> <td>4.0</td> <td>7.0</td> <td>1.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>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>6.0</td> <td>6.0</td> <td>1.0</td> </tr> </tbody> </table>
</div>
<h2>Specifications</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#caps-prop">CSS 2.1 Text #text-transform</a></li>
</ul>
<h3>See also</h3>
<ul> <li>{{ cssxref("font-variant") }}</li> <li>{{ CSS_Reference:Text() }}</li>
</ul>
<p>{{ languages( {"fr": "fr/CSS/text-transform" } ) }}</p>
Revert to this revision