CSS text-transform 属性用于通过以各种方式转换文本来更改文本的外观。它可用于将文本转换为大写、小写、将每个单词的第一个字母大写,甚至将所有字母大写。
可能的值
- lowercase:将所有文本转换为小写。
- uppercase:将所有文本转换为大写。
- capitalize:将每个单词的第一个字符大写。
- none:不应用文本转换。
- full-width:将所有字符转换为其全角变体。
- full-width-kana:将所有小假名字符转换为全尺寸假名字符。这专门用于<ruby>注释文本。
- initial:将文本转换值设置为其默认值 (none)。
- inherit:从其父元素继承 text-transform 值。
- unset:删除任何以前设置的文本转换值。
适用于
所有 HTML 元素。
DOM 语法
object.style.textTransform = "uppercase";
css text-transform - 基本示例
下面是一个示例:
<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>