Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Style wordWrap Thuộc tính


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 -

HTML DOM Style wordWrap Thuộc tính

Nhấp vào “ Đặt wordWrap ”Để cho phép các từ dài kết thúc -

HTML DOM Style wordWrap Thuộc tính