ตัวอย่างการสร้างแอนิเมชันเปลี่ยนระยะห่างระหว่างคำ (word-spacing) ของข้อความ
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background: orange;
animation: myanim 3s infinite;
}
@keyframes myanim {
50% {
word-spacing: 30px;
}
}
</style>
</head>
<body>
<h1>CSS word-spacing property</h1>
<div>
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
This is demo text! This is demo text! This is demo text! This is demo text!
</div>
</body>
</html>
คำอธิบาย: เริ่มต้น word-spacing = normal (ประมาณ 0.25em) ที่ 50% จะขยายเป็น 30px ระหว่างคำ ทำให้ข้อความกระจายตัวออกไป แล้วหดกลับมา
ความแตกต่าง letter-spacing vs word-spacing:
letter-spacing: ระยะห่างระหว่าง ตัวอักษร (characters)word-spacing: ระยะห่างระหว่าง คำ (words - คั่นด้วย space)
การประยุกต์: สร้างเอฟเฟกต์ "stretching text", เน้นคำสำคัญ, artistic typography
ประสิทธิภาพ: ราคาถูก (cheap) ไม่ทำให้เกิด reflow ใหญ่ (แต่ text layout recalculation จำเป็น)
