คุณสมบัติ whiteSpace สไตล์ HTML DOM ส่งคืนและแก้ไขวิธีจัดการแท็บ ตัวแบ่งบรรทัด และช่องว่างในข้อความขององค์ประกอบในเอกสาร HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
-
กำลังส่งคืน whiteSpace
object.style.whiteSpace
-
กำลังแก้ไขช่องว่าง
object.style.whiteSpace = “value”
คุณค่า
ในที่นี้ ค่าสามารถเป็น −
| ค่า | คำอธิบาย |
|---|---|
| เริ่มต้น | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | รับค่าคุณสมบัตินี้จากองค์ประกอบหลัก |
| ปกติ | ในนั้น ลำดับของช่องว่างจะยุบเป็นอันเดียวและข้อความจะถูกตัดเมื่อจำเป็น |
| ตอนนี้ | ในนั้น ลำดับของช่องว่างจะยุบเป็นหนึ่งเดียว และข้อความจะไม่ตัดไปยังบรรทัดถัดไป |
| ก่อนหน้า | ในนั้น ช่องว่างจะถูกเก็บไว้โดยเบราว์เซอร์ และข้อความจะถูกตัดเฉพาะเมื่อพบการขึ้นบรรทัดใหม่ |
| บรรทัดล่วงหน้า | ในนั้น ลำดับของช่องว่างจะยุบเป็นอันเดียว และข้อความจะตัดไปยังบรรทัดถัดไปเมื่อจำเป็นเท่านั้น |
| ห่อล่วงหน้า | ในช่องว่างนั้น เบราว์เซอร์จะรักษาช่องว่างไว้ และข้อความจะตัดไปยังบรรทัดถัดไปเมื่อจำเป็นเท่านั้น |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ HTML DOM whiteSpace -
<!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 Property Example</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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “เปลี่ยน whiteSpace ” เพื่อเปลี่ยนพฤติกรรมของวิธีจัดการกับช่องว่างขององค์ประกอบย่อหน้า -
