เรียนรู้ทำให้ HTML pre tags responsive 100% ด้วย CSS properties เพียงสองตัว
ปัญหาที่พบบ่อยบน tutorial websites: long code snippets (wrapped by pre tags) overflow กว้างกว่าหน้า ทำ layout พัง
เพราะ default pre tags มี CSS white-space property เป็น normal:
pre { white-space: normal; }แก้ง่ายๆ เปลี่ยน normal เป็น pre-wrap:
pre { white-space: pre-wrap; }ดีขึ้นเยอะ แต่ยังไม่แก้ overflow สมบูรณ์ เพราะ pre-wrap จัดการ whole lines of code (code terms ที่คั่นด้วย whitespace)
ถ้าคำเดี่ยวใน code lines ยาวเกินกว่ากว้างหน้า?
Layout ยังพัง เพราะ pre-wrap ไม่จัดการ individual words
ตัวอย่างดี: directory path ยาวง่ายๆ 50+ characters กว้างเกิน layout หลายแบบ โดยเฉพาะ mobile:
cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.mdไม่มี whitespace ระหว่างคำ บราวเซอร์อ่านเป็น หนึ่งคำยาว ถ้ามี spaces ระหว่างคำ จะ wrap ได้เพราะ pre-wrap แต่มันอ่านเป็นคำเดียว
แก้ด้วยการเพิ่ม CSS property word-break ค่า break-all ให้ pre tag:
pre { white-space: pre-wrap; word-break: break-all; }ตอนนี้ pre tags responsive 100% แล้ว!
