mozilla

Revision 25167 of text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25167
  • Created:
  • Creator: elysdir
  • Is current revision? No
  • Comment Cleaning up prose, cleaning up formatting of examples.; 81 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:  capitalize | uppercase | lowercase | none | {{ Cssxref("inherit") }}

Values

capitalize
First letter of each word is converted to uppercase. Other letters are unchanged; that is, they retain their original case as written in the element's text.
uppercase
All letters are converted to uppercase.
lowercase
All letters are converted to lowercase.
none
Case of all letters is unchanged.

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 {{ CompatUnknown() }} {{ CompatGeckoDesktop("1.0") }} 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<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>
<h3>Syntax</h3>
<pre class="eval">text-transform:  capitalize | uppercase | lowercase | none | {{ Cssxref("inherit") }}
</pre>
<h3>Values</h3>
<dl> <dt>capitalize</dt> <dd>First letter of each word is converted to uppercase. Other letters are unchanged; that is, they retain their original case as written in the element's text.</dd> <dt>uppercase</dt> <dd>All letters are converted to uppercase.</dd> <dt>lowercase</dt> <dd>All letters are converted to lowercase.</dd> <dt>none</dt> <dd>Case of all letters is unchanged.</dd>
</dl>
<h3>Examples</h3>
<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>
<h3>Browser compatibility</h3>
<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>{{ CompatUnknown() }}</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</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 Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>Specifications</h3>
<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>
Revert to this revision