คุณสมบัติ word-spacing ใน CSS (ช่องว่างระหว่างคำ)

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

ไวยากรณ์ (Syntax)

Selector {
  word-spacing: /*value*/;
}

ตัวอย่างที่ 1: เพิ่มช่องว่างระหว่างคำ

<!DOCTYPE html>
<html>
<head>
  <style>
    div { display: flex; float: left; padding: 10px; background-color: salmon; }
    div > div {
      word-spacing: 30px; width: 340px; height: 140px;
      border-radius: 5%; box-shadow: inset 0 0 15px blueviolet;
    }
  </style>
</head>
<body>
  <div>
    <div> Magento is an open source E-commerce software, created by Varien Inc., which is useful for online business. It has a flexible modular architecture and is scalable with many control options that is helpful for users.</div>
  </div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้หน่วย em สำหรับ word-spacing

<!DOCTYPE html>
<html>
<head>
  <style>
    q {
      display: flex; padding: 10px; word-spacing: 6em;
      background-color: orange; font-size: 1.2em;
    }
  </style>
</head>
<body>
  <h2>What is Java?</h2>
  According to Java's official documentation, <hr>
  <q cite="https://www.java.com/en/download/faq/whatis_java.xml">Java is a programming language and computing platform first released by Sun Microsystems in 1995.</q>
</body>
</html>

ผลลัพธ์

ค่าที่ใช้ได้

• normal - ช่องว่างปกติ (ค่าเริ่มต้น)
• <length> - ความยาวเฉพาะ เช่น 10px, 0.5em, 2ch (บวกหรือลบได้)
• inherit - สืบทอดจากพาเรนต์

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

เคล็ดลับ

• ใช้ค่าลบ (word-spacing: -2px) เพื่อบีบคำให้ใกล้กัน
• ใช้หน่วย em หรือ ch เพื่อสเกลตามขนาดฟอนต์
• หลีกเลี่ยงค่ามากเกินไปทำให้อ่านยาก