mozilla

Revision 25163 of text-transform

  • Revision slug: CSS/text-transform
  • Revision title: text-transform
  • Revision id: 25163
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment example added; removed legacy name attributes; moved "Specifications" section down; 125 words added, 18 words removed; page display name reset to default

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

Browser Lowest version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)

Specifications

See also

{{ 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>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<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>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision