ใช้คุณสมบัติ white-space เพื่อควบคุมการแสดงผลของช่องว่าง (whitespace) ภายใน element
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <style> p.demo1 { white-space: normal; } p.demo2 { white-space: pre; } </style> </head> <body> <h2>Control white-space</h2> <p class = "demo1"> This is demo text. This is demo text. </p> <p class = "demo2"> This is demo text. This is demo text. </p> </body> </html>
คำอธิบาย
ตัวอย่างเปรียบเทียบ 2 ค่าหลัก:
normal(ค่าเริ่มต้น) - รวมช่องว่างหลายช่องเป็นช่องเดียว และขึ้นบรรทัดใหม่อัตโนมัติpre- รักษาช่องว่างและขึ้นบรรทัดใหม่ตามในโค้ด HTML เหมือน tag <pre>
ค่าอื่นๆ ที่ใช้ได้:
| ค่า | คำอธิบาย |
|---|---|
nowrap | รวมช่องว่างแต่อย่าขึ้นบรรทัดใหม่ |
pre-wrap | รักษาช่องว่างและขึ้นบรรทัดใหม่ แต่ wrap ตามความกว้าง |
pre-line | รวมช่องว่างแต่รักษาการขึ้นบรรทัดใหม่ |
break-spaces | เหมือน pre-wrap แต่จัดการช่องว่างท้ายบรรทัดดีกว่า |
