การตั้งค่าช่องว่างระหว่างคำด้วย CSS (word-spacing)

เพื่อตั้งค่าช่องว่างระหว่างคำ ให้ใช้คุณสมบัติ word-spacing ค่าที่ใช้ได้มีดังนี้:

word-spacing: normal | length | initial | inherit;

ตัวอย่างที่ 1: normal vs 10px

<!DOCTYPE html> <html> <head> <style> p.demo1 {    word-spacing: normal; } p.demo2 {    word-spacing: 10px; } </style> </head> <body> <h1>Demo Heading</h1> <h2>Heading2</h2> <p class="demo1">This is demo text.</p> <h2>Heading2</h2> <p class="demo2">This is demo text.</p> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: 3cm vs 40px

<!DOCTYPE html> <html> <head> <style> p.demo1 {    word-spacing: 3cm; } p.demo2 {    word-spacing: 40px; } </style> </head> <body> <h1>Demo Heading</h1> <h2>Heading2</h2> <p class="demo1">This is demo text.</p> <h2>Heading2</h2> <p class="demo2">This is demo text.</p> </body> </html>

ผลลัพธ์

คำอธิบาย

• normal - ช่องว่างตามปกติของฟอนต์ (ค่าเริ่มต้น)
• length - ระยะห่างเพิ่มเติม (px, em, rem, cm, mm, in) สามารถเป็นค่าลบได้
• initial - คืนค่าเริ่มต้น
• inherit - สืบทอดจากพ่อ

ความแตกต่าง word-spacing vs letter-spacing

หมายเหตุ: สำหรับภาษาไทยที่ไม่มีช่องว่างระหว่างคำ ควรใช้ letter-spacing แทน