Cách xử lý văn bản tràn (textOverflow) chứa element bằng JavaScript

Thuộc tính textOverflow chỉ định cách hiển thị khi văn bản tràn khỏi hộp chứa. Giá trị phổ biến: clip (cắt ngang), ellipsis (hiển thị "..."), string (chuỗi tùy chỉnh - ít hỗ trợ). Điều kiện bắt buộc: container phải có overflow: hidden (hoặc scroll/auto) và white-space: nowrap (để không xuống dòng).

Ví dụ minh họa

Mã sau hiển thị "..." khi văn bản tràn khỏi hộp 200px khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      border: 2px solid blue;
      background-color: gray;
      color: white;
      overflow: hidden;           /* BẮT BUỘC */
      text-overflow: visible;     /* Mặc định: hiển thị tràn ra (chỉ nhìn thấy phần trong hộp) */
      width: 200px;
      white-space: nowrap;        /* BẮT BUỘC: không cho xuống dòng */
      padding: 10px;
    }
  </style>
</head>
<body>
  <button onclick="showEllipsis()">Hiển thị ellipsis</button>
  <div id="myID">
    Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo!<br>
    Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo!<br>
    Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo!<br>
    Đây là Văn bản Demo! Đây là Văn bản Demo! Đây là Văn bản Demo!
  </div>
  <script>
    function showEllipsis() {
      document.getElementById("myID").style.textOverflow = "ellipsis";
      /* Giờ văn bản dài sẽ hiển thị "..." ở cuối thay vì bị cắt ngang */
    }
  </script>
</body>
</html>

Ba giá trị chính

Điều kiện bắt buộc (Checklist)

.container {
  overflow: hidden;        /* 1. Ẩn phần tràn */
  white-space: nowrap;     /* 2. Không cho xuống dòng */
  text-overflow: ellipsis; /* 3. Hiển thị ... */
  width: 200px;            /* 4. Có width cố định (hoặc max-width) */
}

Mẹo: Để ellipsis hoạt động trên nhiều dòng (line-clamp), dùng display: -webkit-box, -webkit-line-clamp: 3, -webkit-box-orient: vertical.