Thuộc tính HTML DOM style wordWrap trả về và sửa đổi từ dài bị ngắt và quấn vào dòng tiếp theo trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại wordWrap
object.style.wordWrap
-
Sửa đổi wordWrap
object.style.wordWrap = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| tên đầu tiên | 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 | Chỉ ngắt từ khi cần thiết. |
| ngắt từ | Nó cho phép chia nhỏ các từ khó vỡ khi cần thiết. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính wordWrap kiểu DOM HTML -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
border: 2px solid #fff;
width: 100px;
}
.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 wordWrap Property Example</h1>
<p>This is a paragraph element. This is a veryveryveryverylongword. This is another veryveryverylongword.</p>
<button onclick="add()" class="btn">Set wordWrap</button>
<script>
function add() {
document.querySelector('p').style.wordWrap = "break-word";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Đặt wordWrap ”Để cho phép các từ dài kết thúc -
