[Day 07] CSS text-transform 字母大小寫與首字母大寫一手掌握 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試 30 天寫文充實版面 (成功跳過假日 ლ(́◕◞౪◟◕‵ლ) ) 不間斷更新文章的 Day 7

當我們開發網頁時，我們常常需要對文本進行大小寫轉換或是將首字母轉為大寫，以達到更好的顯示效果。在 CSS 中，有一個 text-transform 屬性可以實現這些效果，並且提供了六個可用的值，分別是 none、uppercase、lowercase、capitalize、full-width 和 full-size-kana。

其中，uppercase 和 lowercase 可以將文本轉換為全大寫或全小寫，capitalize 則可以將每個單詞的首字母轉換為大寫。而 full-width 和 full-size-kana 則是用來將半角字元轉換為全角字元的值，其中 full-size-kana 專門用來將片假名轉換為全角字元。

在本文中，我們將介紹如何使用 text-transform 屬性對文本進行大小寫轉換和首字母轉為大寫。

語法 - Syntax

• none ：默認值，不對文字進行轉換，保持原樣。
• uppercase ：將所有文字轉換為大寫。
• lowercase ：將所有文字轉換為小寫。
• capitalize ：將每個單詞的首字母轉換為大寫，其餘字母轉換為小寫。
• full-width ：將半角字元轉換為全角字元，適用於中文、日文、韓文等文字。
• full-size-kana ：將片假名轉換為全角字元，適用於日文中的片假名轉換。

當 text-transform 屬性設置為以上六種值時，會對文字進行不同的轉換。

使用 text-transform 屬性，可以快速且方便地對文本進行大小寫轉換，或將首字母轉為大寫，而且不需要進行複雜的操作或使用 JavaScript 等腳本語言來實現。

範例 - Example

<span style="text-transform:uppercase;">
  Hello world
</span>

<span style="text-transform:lowercase;">
  Good Morning Piter.
</span>

<span style="text-transform:capitalize;">
  Good Morning Piter.
</span>

> HELLO WORLD

> hello world

> Hello World

瀏覽器支持 - Browser Support

要看瀏覽器支持的話，請參考 text-transform - CSS: Cascading Style Sheets | MDN 。MDN 提供了一個表格，顯示了每個瀏覽器的支持情況，從而可以確定是否可用於所要支持的瀏覽器。

請注意，雖然大多數現代瀏覽器都支持 text-transform 屬性，但某些舊版瀏覽器可能不支持某些值，因此在設計和開發網站時，需要仔細考慮瀏覽器兼容性。

後記 - Epilogue

明天終於將介紹 toLocaleLowerCase() 與 toLocaleUpperCase() 是什麼了 థ౪థ。

↓↓↓ 傳送門 ↓↓↓

[Day 08] JavaScript 中 toLocaleLowerCase() 與toLocaleUpperCase() ：全球化字串轉換 - 嘗試 30 日寫文充版挑戰