mozilla

Revision 25166 of text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25166
  • Created:
  • Creator: elysdir
  • Is current revision? No
  • Comment 3 words added, 2 words removed

Revision Content

{{ CSSRef() }}

Summary

The text-transform CSS property specifies capitalization and lowercase effects of an element's text should be rendered.

  • {{ 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 on each word is uppercase and other letter unaffected.
uppercase
All letters are converted to uppercase.
lowercase
All letters are converted to lowercase.
none
No case change effects.

Examples

p:first-line { text-transform: uppercase; }

Live Examples

  • none Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • capitalize Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • uppercase Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • 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 capitalization and lowercase effects of an element's text should be rendered.</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 on each word is uppercase and other letter unaffected.</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>No case change effects.</dd>
</dl>
<h3>Examples</h3>
<pre>p:first-line { text-transform: uppercase; }
</pre>
<h4>Live Examples</h4>
<ul> <li><code><strong>none</strong> </code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li style="text-transform:capitalize"><code><strong>capitalize</strong> </code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li style="text-transform:uppercase"><code><strong>uppercase</strong> </code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li style="text-transform:lowercase"><code><strong>lowercase</strong> </code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<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>{{ 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