Hiển thị nội dung tràn khi hover với CSS

Để hiển thị nội dung tràn khi di chuột qua phần tử, bạn có thể chạy mã sau:

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.demo {
        white-space: nowrap;
        width: 180px;
        overflow: hidden;
        border: 2px solid blue;
      }
      div.demo:hover {
        text-overflow: inherit;
        overflow: visible;
      }
    </style>
  </head>
  <body>
    <p>Di chuột qua để xem toàn bộ văn bản bên dưới:</p>
    <br>
    <div class="demo" style="text-overflow:clip;">Văn bản demo sẽ bị ẩn trong hộp này.</div>
  </body>
</html>