คุณสมบัติ white-space ควบคุมการจัดการช่องว่าง (whitespace), แท็บ, และการขึ้นบรรทัดใหม่ ภายใน element
ค่าหลักที่ใช้ได้
| ค่า | คำอธิบาย |
|---|---|
normal | รวมช่องว่างหลายช่องเป็นช่องเดียว ขึ้นบรรทัดใหม่เฉพาะ <br> หรือ block element |
pre | รักษาช่องว่างและขึ้นบรรทัดใหม่ทุกอย่าง ไม่ wrap ข้อความ (เหมือน <pre>) |
nowrap | รวมช่องว่าง แต่ไม่ wrap ข้อความ (อยู่บรรทัดเดียวจนกว่าจะมี <br>) |
pre-wrap | รักษาช่องว่างและขึ้นบรรทัดใหม่ และ wrap ข้อความเมื่อถึงขอบ |
pre-line | รวมช่องว่าง แต่รักษาการขึ้นบรรทัดใหม่ และ wrap ข้อความ |
break-spaces | เหมือน pre-wrap แต่ preserve ช่องว่างท้ายบรรทัด (ใหม่กว่า) |
ตัวอย่างโค้ด
<!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>
การประยุกต์: pre-wrap เหมาะสำหรับแสดงโค้ดหรือข้อความที่ผู้ใช้พิมพ์เอง (user-generated content) nowrap ใช้กับปุ่มหรือเมนูที่ไม่อยากให้ข้อความหลุดบรรทัด
