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 ...">  <!-- ... --></p>

在變體文件中了解更多關於使用變體的資訊。