[CSS] 利用 text-transform 改變字母的大小寫

2021-11-26 14:13:40

在 CSS 我們可以直接透過 text-transform 設定選擇器內的字母轉換大小寫，可以設置的值有以下這些：

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

舉例來說，我們有一段原始文字是 Hello world

設置 text-transform: capitalize 可以讓每個單字的首字變大寫，也就是會變成：

Hello World

設置 text-transform: uppercase 可以讓每個單字的首字變大寫，也就是會變成：

HELLO WORLD

設置 text-transform: lowercase 可以讓每個單字的首字變大寫，也就是會變成：

hello world

none 則是不會有任何變化。

因為直接透過 CSS 就能改變文字的大小寫很方便，如果有需要的可以使用看看。

Prism- 幫助你要在文章裡面放入程式碼能夠更清楚顯示的工具 [PHP] 如何刪掉陣列內指定的值

你可能也會喜歡的

JSFiddle- 讓你可以線上 coding 與分享的網站

Vivify- 收錄許多動畫效果的 CSS 樣式庫

Code Beautify- 超多線上工具整合網站

Scroll-driven Animations：收錄許多網頁捲動時的特效實踐方法

[CSS] 使用 scroll-padding-top 達成免 javascript 也能夠在移動到錨點時設定離瀏覽器頂端有一定距離

CSSBattle：透過競賽讓開發者更加熟悉 CSS 開發的平台

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。