Thuộc tính DOM style textOverflow trả về và áp dụng những gì sẽ xảy ra khi luồng văn bản bên ngoài vùng chứa phần tử trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại textOverflow
object.style.textOverflow
-
Sửa đổi textOverflow
object.style.textOverflow = “value”
Giá trị
Ở đây, giá trị có thể là -
| Giá trị | Giải thích |
|---|---|
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó. |
| tên đầu tiên | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| clip | Nó cắt phần văn bản tràn ra. |
| dấu chấm lửng | Nó đặt một dấu chấm lửng (“...”) để biểu thị văn bản được cắt bớt của một phần tử. |
| chuỗi | Nó đặt chuỗi đã cho để đại diện cho văn bản được cắt bớt của một phần tử. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính style textOverflow -
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
border: 3px solid #fff;
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: visible;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textOverflow Property Example</h1>
<p>
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change textOverflow</button>
<script>
function add() {
document.querySelector('p').style.textOverflow = "ellipsis";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Thay đổi textOverflow ”Để thay đổi hành vi của văn bản đoạn văn tràn. Các dấu chấm lửng được thêm vào đây -
