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

ด้วยการกำหนดคุณสมบัติ word-spacing ใน CSS เราสามารถตั้งค่าปริมาณช่องว่างระหว่างคำได้

ตัวอย่างที่ 1: การตั้งค่าระยะห่างคำ

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 2%; 
  padding: 2%; 
  background-color: mediumorchid; 
  color: ivory; 
  word-spacing: 2.2cm; 
} 
div:last-of-type { 
  word-spacing: normal; 
} 
</style> 
</head> 
<body> 
<div>I Don't Care! I Love It!</div> 
<div>I Don't Care! I Love It!</div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

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

<!DOCTYPE html> 
<html> 
<head> 
<style> 
article { 
  margin: 2%; 
  padding: 2%; 
  background-color: azure; 
  word-spacing: 2.2cm; 
} 
article:last-of-type { 
  word-spacing: normal; 
} 
</style> 
</head> 
<body> 
<article>tldr; this article doesn;t mean anything</article> 
<article>0123456789 is not a phone number</article> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: