CSS - text-transform Property

The text-transform property is used to change the appearance of text by transforming it in various ways. It can be used to convert text to uppercase, lowercase, capitalize the first letter of each word, or even capitalize all letters.

Possible Values

lowercase: Transforms all text to lowercase.
uppercase: Transforms all text to uppercase.
capitalize: Capitalizes the first character of each word.
none: No text transformation is applied.
full-width: Transforms all characters to their full-width variant.
full-width-kana: Transforms all the small Kana characters to full-size Kana characters. This is specifically used for <ruby> annotation text.
initial: Sets the text-transform value to its default value (none).
inherit: Inherits the text-transform value from its parent element.
unset: Removes any previously set text-transform value.

Applies to

All the HTML elements.

DOM Syntax

object.style.textTransform = "uppercase";

css text-transform - Basic Example

Here is an example:

<html>
<head>
<style>
   div {border:2px solid red; padding: 5px; margin: 2px; width: 300px;}
   span {text-transform: full-width;}
   strong {width: 100%;}
</style>
</head>
<body>
   <h2>Text Transform</h2>
   <div>
      <p style="text-: capitalize;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: lowercase;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: uppercase;">Text transformed.</p>
   </div>
   <div>
      <p style="text-transform: none;">Text transformed.</p>
   </div>
   <div>
      <strong>
      <span>TRANSFORMATION OF TEXT AS FULL-WIDTH.</span>
      </strong>
      </div>
</body>
</html>

Print Page