แสดงเนื้อหาที่ล้น (Overflow) เมื่อ Hover ด้วย CSS

เพื่อแสดงเนื้อหาที่ล้น (overflow) เมื่อวางเมาส์ hover ให้ใช้ overflow: visible ร่วมกับ pseudo-class :hover

ตัวอย่างโค้ด

<!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>Hover เพื่อดูข้อความเต็ม:</p>
  <br>
  <div class="demo" style="text-overflow:clip;">Demo Text that will hide in this box.</div>
</body>
</html>

คำอธิบาย: ปกติ overflow: hidden ซ่อนข้อความที่ยาวเกิน width: 180px เมื่อ hover overflow: visible จะแสดงข้อความทั้งหมดล้นออกมาจากกล่อง