text-transform

用于控制文本大小写的工具类。

快速参考

类	属性
uppercase	text-transform: uppercase;
lowercase	text-transform: lowercase;
capitalize	text-transform: capitalize;
normal-case	text-transform: none;

示例

将文本转为大写

使用 uppercase 工具类将元素的文本转为大写：

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:uppercase] -->
<p class="uppercase">The quick brown fox ...</p>

将文本转为小写

使用 lowercase 工具类将元素的文本转为小写：

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:lowercase] -->
<p class="lowercase">The quick brown fox ...</p>

将文本首字母大写

使用 capitalize 工具类将元素文本的每个单词首字母大写：

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:capitalize] -->
<p class="capitalize">The quick brown fox ...</p>

重置文本大小写

使用 normal-case 工具类保留元素的原始文本大小写——通常用于在不同断点重置大小写：

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:normal-case] -->
<p class="normal-case">The quick brown fox ...</p>

响应式设计

使用 md: 等断点变体作为 text-transform 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<p class="capitalize md:uppercase ...">
 Lorem ipsum dolor sit amet...
</p>

更多关于变体的用法，请参阅变体文档。