คุณสมบัติ whiteSpace ของ HTML DOM Style ใช้สำหรับดึงหรือกำหนดวิธีการจัดการแท็บ (tabs), การขึ้นบรรทัดใหม่ (line breaks), และช่องว่าง (whitespace) ในข้อความขององค์ประกอบในเอกสาร HTML
ไวยากรณ์ (Syntax)
การดึงค่า whiteSpace
object.style.whiteSpace
การกำหนดค่า whiteSpace
object.style.whiteSpace = "value"
ค่าที่รองรับ (Values)
| ค่า | คำอธิบาย |
|---|---|
| initial | กำหนดค่าเป็นค่าเริ่มต้น |
| inherit | สืบทอดค่าจากองค์ประกอบผู้ปกครอง |
| normal | ช่องว่างต่อเนื่องจะรวมเป็นช่องว่างเดียว และข้อความจะขึ้นบรรทัดใหม่เมื่อจำเป็น (ค่าเริ่มต้น) |
| nowrap | ช่องว่างต่อเนื่องจะรวมเป็นช่องว่างเดียว และข้อความจะไม่ขึ้นบรรทัดใหม่ (อยู่บรรทัดเดียว) |
| pre | รักษาช่องว่างและขึ้นบรรทัดใหม่ตามที่พิมพ์ไว้ เหมือนแท็ก <pre> |
| pre-line | ช่องว่างต่อเนื่องจะรวมเป็นช่องว่างเดียว แต่ขึ้นบรรทัดใหม่ตาม \n ในโค้ด |
| pre-wrap | รักษาช่องว่างและขึ้นบรรทัดใหม่ตามที่พิมพ์ไว้ และขึ้นบรรทัดใหม่เมื่อจำเป็น |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยนพฤติกรรมการจัดการช่องว่างด้วย pre-line:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
border: 2px solid #fff;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>ตัวอย่างคุณสมบัติ DOM Style whiteSpace</h1>
<p>
I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
I'm paragraph element with some dummy text. I'm paragraph element with some dummy text.
I'm paragraph element with some dummy text.
</p>
<button onclick="add()" class="btn">Change whiteSpace</button>
<script>
function add() {
document.querySelector('p').style.whiteSpace = "pre-line";
}
</script>
</body>
</html>
ผลลัพธ์ (Output)
ก่อนคลิกปุ่ม: ข้อความแสดงต่อเนื่อง ช่องว่างและขึ้นบรรทัดใหม่ในโค้ดถูกรวมเป็นช่องว่างเดียว หลังคลิกปุ่ม Change whiteSpace: ข้อความจะขึ้นบรรทัดใหม่ตาม \n ในโค้ดต้นฉบับ แต่ช่องว่างต่อเนื่องยังคงรวมเป็นช่องว่างเดียว
ตารางสรุป: normal/nowrap รวมช่องว่าง, pre/pre-wrap รักษาช่องว่าง, pre-line/pre-wrap รองรับ \n, nowrap ไม่ wrap, อื่นๆ wrap ตามความกว้าง
