Thuộc tính HTML DOM style whiteSpace trả về và sửa đổi cách xử lý các tab, ngắt dòng và khoảng trắng trong văn bản của một phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại khoảng trắng
object.style.whiteSpace
-
Sửa đổi khoảng trắng
object.style.whiteSpace = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| ban đầu | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| bình thường | Trong đó, chuỗi khoảng trắng sẽ thu gọn thành một khoảng trắng duy nhất và văn bản sẽ bao bọc khi cần thiết. |
| ngay | Trong đó, chuỗi khoảng trắng sẽ thu gọn thành một khoảng trắng duy nhất và văn bản sẽ không nằm ở dòng tiếp theo. |
| pre | Trong đó, trình duyệt giữ nguyên khoảng trắng và văn bản sẽ chỉ bao bọc khi gặp phải ngắt dòng. |
| dòng trước | Trong đó, chuỗi khoảng trắng sẽ thu gọn thành một khoảng trắng duy nhất và văn bản sẽ chỉ chuyển sang dòng tiếp theo khi cần thiết. |
| gói trước | Trong đó, trình duyệt giữ nguyên khoảng trắng và văn bản sẽ chỉ chuyển sang dòng tiếp theo khi cần thiết. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính HTML DOM style 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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi khoảng trắng ”Để thay đổi hành vi của cách xử lý khoảng trắng của phần tử đoạn văn -
