Thuộc tính style textOverflow trong HTML DOM

Thuộc tính style.textOverflow trong HTML DOM trả về và cho phép áp dụng hành vi khi văn bản tràn ra ngoài container của phần tử trong tài liệu HTML. Thuộc tính này thường dùng kết hợp với overflow: hidden và white-space: nowrap.

Cú pháp

Lấy giá trị textOverflow

object.style.textOverflow

Thay đổi textOverflow

object.style.textOverflow = "value"

Các giá trị

Giá trị có thể là:

Giá trị	Mô tả
inherit	Kế thừa giá trị từ phần tử cha.
initial	Đặt về giá trị mặc định.
clip	Cắt văn bản tràn.
ellipsis	Hiển thị dấu ba chấm ("...") đại diện cho văn bản bị cắt.
string	Hiển thị chuỗi ký tự tùy chỉnh đại diện cho văn bản bị cắt.

Ví dụ

Ví dụ sử dụng 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>Ví dụ thuộc tính style textOverflow DOM</h1>
<p> Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. </p>
<button onclick="add()" class="btn">Thay đổi textOverflow</button>
<script>
  function add() {
    document.querySelector('p').style.textOverflow = "ellipsis";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thay đổi textOverflow để thay đổi hành vi của văn bản tràn. Dấu ba chấm sẽ được thêm vào.