CSS 文字轉換 (text-transform)

text-transform 用來控制文字的大小寫轉換，常用於英文文字的格式化。

屬性值

none（預設值）

不做任何轉換，保持原本的大小寫。

.normal {
  text-transform: none;
}

uppercase

將所有字母轉換為大寫。

.uppercase {
  text-transform: uppercase;
}

<p class="uppercase">Hello World</p>
<!-- 顯示：HELLO WORLD -->

lowercase

將所有字母轉換為小寫。

.lowercase {
  text-transform: lowercase;
}

<p class="lowercase">Hello World</p>
<!-- 顯示：hello world -->

capitalize

將每個單字的首字母轉換為大寫。

.capitalize {
  text-transform: capitalize;
}

<p class="capitalize">hello world</p>
<!-- 顯示：Hello World -->

full-width

將字元轉換為全形字元（主要用於東亞文字排版）。

.full-width {
  text-transform: full-width;
}

實用範例

按鈕文字

.button {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

<button class="button">Submit</button>
<!-- 顯示：SUBMIT -->

導航選單

nav a {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

標題樣式

h1 {
  text-transform: capitalize;
}

/* 或全大寫標題 */
.section-title {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: bold;
}

表單標籤

label {
  text-transform: uppercase;
  font-size: 12px;
  color: #666;
}

注意事項

對中文無效

text-transform 主要針對拉丁字母，對中文字沒有效果：

<p class="uppercase">你好世界</p>
<!-- 中文不會改變 -->

不改變原始文字

CSS 的 text-transform 只改變顯示效果，不會改變 HTML 中的原始文字。這對 SEO 和螢幕閱讀器來說是好事，因為它們讀取的是原始文字。

<!-- HTML 中還是小寫 -->
<h1 class="uppercase">welcome to our site</h1>
<!-- 只是顯示為 WELCOME TO OUR SITE -->

搭配其他屬性

text-transform: uppercase 常搭配 letter-spacing 使用，因為全大寫的文字通常需要較大的字元間距來提高可讀性：

.uppercase-title {
  text-transform: uppercase;
  letter-spacing: 0.15em;
}