จัดตัวอักษรไทยบนเว็บ: สิ่งที่ทำให้หน้าพังและวิธีแก้

กับดักที่เจอบ่อย

• ใช้ grid-template-columns: 1fr ทำให้คอลัมน์ดัน container กว้างเกิน viewport
• ลืม min-width: 0 บน flex item ที่มีข้อความยาว
• ใส่คำอังกฤษยาว ๆ เช่น URL โดยไม่มีจุดตัดบรรทัด

/* แก้ 3 จุดนี้แล้วหน้าจะไม่ล้น */
.grid { grid-template-columns: minmax(0, 1fr); }
.flex-child { min-width: 0; }
body { overflow-wrap: anywhere; }