สำหรับการแปลงข้อความใน CSS ให้ใช้คุณสมบัติ text-transform พร้อมกับค่าต่อไปนี้:
text-transform: none | capitalize | uppercase | lowercase | initial | inherit;
ตัวอย่าง: แปลงเป็นตัวพิมพ์ใหญ่ทั้งหมด (uppercase)
<!DOCTYPE html> <html> <head> <style> div { line-height: 1.9; text-transform: uppercase; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.<br> This is another demo text. </p> </div> </body> </html>
ผลลัพธ์
ตัวอย่าง: แปลงเป็นตัวพิมพ์เล็กทั้งหมด (lowercase)
<!DOCTYPE html> <html> <head> <style> div { text-transform: lowercase; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>THIS is demo text.<br> This is ANOTHER demo text. </p> </div> </body> </html>
ผลลัพธ์
คำอธิบายค่าแต่ละตัว
- none - ไม่มีการแปลงข้อความ (ค่าเริ่มต้น)
- capitalize - ตัวอักษรแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่
- uppercase - ทุกตัวอักษรเป็นตัวพิมพ์ใหญ่
- lowercase - ทุกตัวอักษรเป็นตัวพิมพ์เล็ก
- initial - ใช้ค่าเริ่มต้น
- inherit - สืบทอดจากองค์ประกอบพ่อ
