text-wrap: balance — จัดบรรทัด heading ให้สมดุลอัตโนมัติ

text-wrap: balance ให้ browser จัดบรรทัดข้อความให้สมดุลกัน — ป้องกัน heading ที่บรรทัดสุดท้ายมีคำเดียวค้างอยู่ (orphan)

/* ก่อน: "การออกแบบ" อยู่บรรทัดสุดท้ายคำเดียว */
h1, h2, h3 {
  text-wrap: balance;  /* browser คำนวณ break point ที่สมดุล */
}

/* text-wrap: pretty — ป้องกัน orphan บรรทัดสุดท้าย
   ดีกว่า balance สำหรับ body text เพราะ balance แพงกว่า */
p {
  text-wrap: pretty;
}

เปรียบเทียบ:

value	ใช้กับ	ผล
balance	heading สั้น	ทุกบรรทัดยาวใกล้เคียงกัน
pretty	body text ยาว	แค่บรรทัดสุดท้ายไม่มี orphan
stable	editable content	ไม่เปลี่ยน layout ขณะพิมพ์

ข้อจำกัด: balance ทำงานกับ element ที่มีไม่เกิน 6 บรรทัด (Chrome) — เหมาะกับ heading ไม่เหมาะกับ paragraph ยาว เพราะ browser ต้องลอง layout หลายครั้ง

Browser support: Chrome 114+, Firefox 121+, Safari 17.4+ — ใช้ production ได้แล้ว