สามารถเพิ่ม line break ให้元素 HTML โดยไม่ใช้ <br> ได้ โดยใช้ pseudo-elements — ใช้จัดสไตล์ส่วนเฉพาะของ元素 ที่นี่ใช้ ::after เพื่อเพิ่ม line break
<!DOCTYPE html> <html lang="en"> <head> <style> span { padding: 1px 8px; } span::after { content: '\a'; white-space: pre; } </style> </head> <body> <div> <span>Dumbledore</span> <span>McGonagall</span> <span>Snape</span> <span>Trelawney</span> </div> </body> </html>
โค้ดข้างต้นใช้ pseudo-element ::after บน元素 inline (span) เพื่อเพิ่ม carriage return (แทนด้วย \a) หลังข้อความของแต่ละ span
::after มีคุณสมบัติ content (สตริงที่จะแทรก) และ white-space: pre (รักษา whitespace) — ถ้าไม่มี white-space: pre จะไม่ทำงานเพราะ span เป็น inline-block
ข้อจำกัดและทางเลือกอื่น
หากเพิ่ม padding และ background จะพบว่า background เริ่มจากบรรทัดก่อนแล้วขึ้นบรรทัดใหม่ — ไม่ได้ผลเหมือนที่คาดหวัง
span { padding: 1px 8px; background: pink; } span::before { content: "\A"; white-space: pre; }
มีทางเลือกอื่น เช่น box-decoration-break: clone แต่ก็ไม่ให้ผลลัพธ์ที่ต้องการพอดี
การใช้ block-level elements เช่น <p> หรือ <div> เป็นทางเลือกง่าย แต่ถ้าต้องการค่า display อื่น?
ทางเลือก: Table Layout
ใน CSS selector ของ span ให้ใช้ display: table แทน — ทำให้โค้ดสะอาดและได้เลย์เอาต์ที่ต้องการ ไม่ได้ใช้ table แบบเดิมแต่ได้ผลลัพธ์ที่ต้องการ
สรุป
เทคนิค ::after กับ content: '\a'; white-space: pre สร้าง line break ได้โดยไม่ใช้ <br> แต่มีข้อจำกัดกับ background/padding — display: table เป็นทางเลือกที่ดีกว่าในหลายกรณี
