1. Web
  2. CSS
  3. text-transform

text-transform

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

text-transform CSS 屬性指定了如何大寫一個元素的文字。它可以用於將文字轉為全大寫或全小寫，或將每個單詞的首字母大寫。它還可以幫助提高 ruby 文字的可讀性。

試一試

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

text-transform: full-width;

text-transform: full-size-kana;

text-transform: math-auto;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      LONDON. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall.
    </p>
    <p lang="el">
      Σ is a Greek letter and appears in ΟΔΥΣΣΕΥΣ. Θα πάμε στο "Θεϊκό φαΐ" ή στη
      "Νεράιδα"
    </p>
    <p lang="ja">ァィゥェ ォヵㇰヶ</p>
  </div>
</section>

#example-element {
  font-size: 1.2em;
}

text-transform 屬性會考慮特定語言的大小寫對映規則，例如以下幾種：

  • 在土耳其語（tr）、亞塞拜然語（az）、克里米亞韃靼語（crh）、伏爾加韃靼語（tt）和巴什基爾語（ba）等突厥語系語言中，有兩種 i，帶點和不帶點的，並且有兩種大小寫配對：i/İ 和 ı/I。
  • 在德語（de）中，ß 在大寫時變為 SS。
  • 在荷蘭語（nl）中，ij 二合字母會變為 IJ，即使使用 text-transform: capitalize（此屬性通常只將單詞的第一個字母大寫）。
  • 在希臘語（el）中，當整個單詞大寫時，母音會失去重音（ά/Α），但析取 eta（ή/Ή）除外。此外，在第一個母音上帶有重音的雙母音會失去重音，並在第二個母音上加上分音符（άι/ΑΪ）。
  • 在希臘語（el）中，小寫字母 sigma 有兩種形式：σ 和 ς。ς 僅在 sigma 作為單詞結尾時使用。當對大寫 sigma（Σ）應用 text-transform: lowercase 時，瀏覽器需要根據上下文選擇正確的小寫形式。
  • 在愛爾蘭語（ga）中，當詞基的首字母大寫時，某些字首字母保持小寫，例如 text-transform: uppercase 會將 ar aon tslí 變為 AR AON tSLÍ，而不是人們可能期望的 AR AON TSLÍ（僅限 Firefox）。在某些情況下，大寫時連字元也會被移除：an t-uisce 轉換為 AN tUISCE（並且連字元會被 text-transform: lowercase 正確地重新插入）。

語言由 lang HTML 屬性或 xml:lang XML 屬性定義。

注意：不同瀏覽器對特定語言的大小寫規則的支援情況有所不同，請檢視瀏覽器相容性表格。

語法

css
/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;
text-transform: math-auto;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;
capitalize

是一個關鍵字，它將每個單詞的第一個字母轉換為大寫。其他字元保持不變（它們保留元素文字中書寫的原始大小寫）。字母被定義為 Unicode 的“字母”或“數字”通用類別中的字元；因此，單詞開頭的任何標點符號或符號都會被忽略。

注意：開發者不應期望 capitalize 會遵循特定語言的標題大寫約定（例如在英語中跳過冠詞）。

注意：capitalize 關鍵字在 CSS 1 和 CSS 2.1 中的規範不夠明確。這導致了不同瀏覽器在計算首字母的方式上存在差異（Firefox 認為 - 和 _ 是字母，但其他瀏覽器不是。WebKit 和 Gecko 都錯誤地將基於字母的符號（如 ⓐ）視為真正的字母）。透過精確定義正確的行為，CSS Text Level 3 清理了這一混亂。瀏覽器相容性表格中的 capitalize 行包含了不同引擎開始支援這一現在精確定義的行為的版本。

uppercase

是一個關鍵字，它將所有字元轉換為大寫。

lowercase

是一個關鍵字，它將所有字元轉換為小寫。

none

是一個關鍵字，它阻止所有字元的大小寫被更改。

full-width

是一個關鍵字，它強制將一個字元（主要是表意文字和拉丁文字）書寫在一個方形空間內，從而使它們能夠與常規的東亞文字（如中文或日文）對齊。

full-size-kana

通常用於 <ruby> 注音文本，該關鍵字將所有小型假名字元轉換為等效的全尺寸假名，以彌補在 ruby 中常用的小字型尺寸下的可讀性問題。

math-auto

用於在適當的情況下自動將文字渲染為數學斜體。它會將拉丁字母、希臘字母以及其他一些與數學相關的符號轉換為斜體數學符號，但僅當它應用於包含單個字元的文字節點時。例如，“x”將變為“𝑥”（U+1D465），但“exp”將保持為“exp”。它主要用於指定 MathML 中 <mi> 元素的行為。通常，你應該使用 MathML 標記，它會自動應用正確的樣式。

無障礙

對於有認知障礙（如閱讀障礙）的人來說，大段設定為 text-transform 值為 uppercase 的文字可能難以閱讀。

正式定義

初始值none
應用於所有元素。也適用於 ::first-letter 和 ::first-line。
繼承性是
計算值同指定值
動畫型別離散

正式語法

text-transform = 
  none                                                |
  [ capitalize | uppercase | lowercase ] || full-width || full-size-kana  |
  math-auto

示例

使用 "none" 的示例

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: none
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: none;
}
strong {
  float: right;
}

這演示了沒有文字轉換。

使用 "capitalize" 的示例（通用）

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

這演示了文字首字母大寫。

使用 "capitalize" 的示例（標點符號）

html
<p>
  Initial String
  <strong
    >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
    ?¡transform!</strong
  >
</p>
<p>
  text-transform: capitalize
  <strong
    ><span
      >(this) "is" [a] –short– -test- «for» *the* _css_ ¿capitalize?
      ?¡transform!</span
    ></strong
  >
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

這演示瞭如何忽略單詞的初始標點符號。該關鍵字針對第一個字母，即屬於字母或數字通用類別的第一個 Unicode 字元。

使用 "capitalize" 的示例（符號）

html
<p>
  Initial String
  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
</p>
<p>
  text-transform: capitalize
  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

這演示瞭如何忽略初始符號。該關鍵字針對第一個字母，即屬於字母或數字通用類別的第一個 Unicode 字元。

使用 "capitalize" 的示例（荷蘭語 ij 二合字母）

html
<p>
  Initial String
  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
</p>
<p>
  text-transform: capitalize
  <strong
    ><span lang="nl"
      >The Dutch word: "ijsland" starts with a digraph.</span
    ></strong
  >
</p>
css
span {
  text-transform: capitalize;
}
strong {
  float: right;
}

這演示了荷蘭語的 ij 二合字母必須像單個字母一樣處理。

使用 "uppercase" 的示例（通用）

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

這演示了將文字轉換為大寫。

使用 "uppercase" 的示例（希臘語母音）

html
<p>
  Initial String
  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
</p>
<p>
  text-transform: uppercase
  <strong
    ><span lang="el">Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong
  >
</p>
css
span {
  text-transform: uppercase;
}
strong {
  float: right;
}

這演示了除析取 eta 外的希臘語母音應不帶重音，並且母音對中第一個母音上的重音會變為第二個母音上的分音符。

使用 "lowercase" 的示例（通用）

html
<p>
  Initial String
  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
    ></strong
  >
</p>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

這演示了將文字轉換為小寫。

使用 "lowercase" 的示例（希臘語 Σ）

html
<p>
  Initial String
  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
</p>
<p>
  text-transform: lowercase
  <strong
    ><span
      >Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span
    ></strong
  >
</p>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

這演示了希臘字元 sigma (Σ) 如何根據上下文轉換為常規的小寫 sigma (σ) 或詞末變體 (ς)。

使用 "lowercase" 的示例（立陶宛語）

html
<p>
  Initial String
  <strong>Ĩ is a Lithuanian LETTER as is J́</strong>
</p>
<p>
  text-transform: lowercase
  <strong><span lang="lt">Ĩ is a Lithuanian LETTER as is J́</span></strong>
</p>
css
span {
  text-transform: lowercase;
}
strong {
  float: right;
}

這演示了立陶宛語字母 Ĩ 和 J́ 在轉換為小寫時如何保留其上方的點。

使用 "full-width" 的示例（通用）

html
<p>
  Initial String
  <strong
    >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong
  >
</p>
<p>
  text-transform: full-width
  <strong
    ><span
      >0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span
    ></strong
  >
</p>
css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

有些字元存在兩種格式：普通寬度和全形寬度，它們具有不同的 Unicode 碼點。全形版本用於使它們能夠與亞洲表意字元平滑地混合。

使用 "full-width" 的示例（日語半形片假名）

html
<p>
  Initial String
  <strong>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</strong>
</p>
<p>
  text-transform: full-width
  <strong><span>ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強</span></strong>
</p>
css
span {
  text-transform: full-width;
}
strong {
  width: 100%;
  float: right;
}

日語半形片假名曾用於在 8 位字元編碼中表示片假名。與常規（全形）片假名字元不同，一個帶有濁點（濁音符號）的字母由兩個碼點表示，即字母主體和濁點。full-width 在將這些字元轉換為全形時，會將它們組合成一個單一的碼點。

使用 "full-size-kana" 的示例

html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
css
p:nth-of-type(2) {
  text-transform: full-size-kana;
}

使用 "math-auto" 的示例

在這個例子中，我們使用純 HTML 標記來建立一個數學公式

html
<div>
  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
    >2</sup
  >
  = 1
</div>

我們給每個 .math-id 元素設定 text-transform: math-auto。但是，請注意只有 x 字元變成了斜體，而 sin 和 cos 保持不變。

css
.math-id {
  text-transform: math-auto;
}

然而，我們鼓勵你使用 MathML 來表示數學公式，因為它提供了一種更健壯和更易於訪問的方式來表示數學內容。這是使用 MathML 的相同公式

xml
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">sin</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mo stretchy="false">(</mo>
      <mo lspace="0em" rspace="0em">cos</mo>
      <mspace width="0.16666666666666666em"></mspace>
      <mi>x</mi>
      <msup>
        <mo stretchy="false">)</mo>
        <mn>2</mn>
      </msup>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
  </semantics>
</math>

規範

規範
CSS 文字模組第 4 級
# text-transform-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.