如何在 CSS 中僅將每個單字的第一個字母大寫，同時保留現有的全部大寫？

CSS 文字轉換：大寫全大寫困境

CSS 中的 text-transform 屬性控製文字的大小寫。當設定為“大寫”時，它將每個單字的第一個字母大寫。然而，在處理已經全部大寫的單字時，這會帶來挑戰。

問題

在提供的HTML 和CSS 片段中：

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

.link {
  text-transform: capitalize;
}

輸出為「小型大寫字母和全部大寫字母”，而所需的輸出為“小型大寫字母和全部大寫字母”全部大寫。 "

解

要達到所需的結果，可以採用CSS 規則的組合：

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

• text-transform : lowercase 規則將「.link」元素中的所有文字轉換為小寫。一個字母和第一行大寫。輸出將是：

以上是如何在 CSS 中僅將每個單字的第一個字母大寫，同時保留現有的全部大寫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！