การแปลงรูปแบบข้อความด้วย CSS text-transform

คุณสมบัติ text-transform ใน CSS ใช้กำหนดการเปลี่ยนแปลงตัวพิมพ์ (capitalization) ของข้อความ รับค่า: capitalize, lowercase, uppercase, full-width, full-size-kana, none

ไวยากรณ์ (Syntax)

Selector {
  text-transform: /*value*/;
}

ตัวอย่างที่ 1: Uppercase, Lowercase, Capitalize

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 { text-transform: uppercase; }
    .demo { text-transform: lowercase; }
    q { text-transform: capitalize; font-style: italic; }
  </style>
</head>
<body>
  <h2>WordPress</h2>
  <q>WordPress is open source software you can use to create a beautiful website, blog, or app.</q>
  <p class="demo">34% of the web uses WordPress, from hobby blogs to the biggest news sites online.</p>
</body>
</html>

ผลลัพธ์

การแปลงรูปแบบข้อความด้วย CSS text-transform

ตัวอย่างที่ 2: ใช้กับ div, p, article

<!DOCTYPE html>
<html>
<head>
  <style>
    div { background-color: lightgreen; margin: auto; text-align: center; }
    p { width: 80%; background-color: aquamarine; text-decoration: uppercase; }
    article { background-color: darksalmon; text-transform: lowercase; }
  </style>
</head>
<body>
  <h2>What is Magento?</h2>
  <div>
    <p>Magento is an open-source e-commerce platform written in PHP.</p>
    <article> Build your own branded store powered by Magento Commerce and Amazon. Choose from 4,600 themes and extensions in the Magento Marketplace as well as more than 300,000 Magento developers. </article>
  </div>
</body>
</html>

ผลลัพธ์

การแปลงรูปแบบข้อความด้วย CSS text-transform

ค่าของ text-transform

ค่า	คำอธิบาย	ตัวอย่าง Input → Output
`none`	ไม่เปลี่ยน (ค่าเริ่มต้น)	"Hello World" → "Hello World"
`capitalize`	ตัวแรกของแต่ละคำเป็นใหญ่	"hello world" → "Hello World"
`uppercase`	ทุกตัวเป็นพิมพ์ใหญ่	"Hello World" → "HELLO WORLD"
`lowercase`	ทุกตัวเป็นพิมพ์เล็ก	"Hello World" → "hello world"
`full-width`	แปลงเป็น full-width chars (CJK)	"ABC" → "ＡＢＣ"
`full-size-kana`	คะนาญาเป็น full-size (Japanese)	ゃゃ → ゃや

ข้อควรระวัง

capitalize ไม่แปลงตัวอักษรหลังอะพอสโตรฟี: "don't" → "Don't" (ไม่ใช่ "Don'T")
text-transform ส่งผลต่อการแสดงผลเท่านั้น ไม่เปลี่ยนค่า DOM (copy/paste จะได้ข้อความต้นฉบับ)
ภาษาบางภาษา (Turkish, Greek) มีกฎพิมพ์ใหญ่/เล็กพิเศษ Browser จัดการอัตโนมัติ
ในตัวอย่างที่ 2 ใช้ text-decoration: uppercase ซึ่งผิด ควรเป็น text-transform: uppercase