text-transform

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.

<p class="uppercase">The quick brown fox ...</p>

使用 lowercase 实用工具将元素的文本转换为小写

The quick brown fox jumps over the lazy dog.

<p class="lowercase">The quick brown fox ...</p>

使用 capitalize 实用工具将元素文本的首字母大写

The quick brown fox jumps over the lazy dog.

<p class="capitalize">The quick brown fox ...</p>

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

The quick brown fox jumps over the lazy dog.

<p class="normal-case">The quick brown fox ...</p>

前缀a text-transform 实用工具带有断点变体，例如 md:，仅在以下情况下应用该实用工具中等屏幕尺寸及以上

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

了解更多关于在变体文档中使用变体的信息。