CSS - text-transform 属性



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>