Display the overflowed content when hovering over the element with CSS

To display the overflowed content while hovering over elements, you can try to run the following code:


Live Demo

<!DOCTYPE html>
         div.demo {
            white-space: nowrap;
            width: 180px;
            overflow: hidden;
            border: 2px solid blue;
         div.demo:hover {
            text-overflow: inherit;
            overflow: visible;
      <p>Hover to see the complete text below:</p>
      <div class = "demo" style = "text-overflow:clip;">Demo Text that will hide in this box.</div>

Updated on: 23-Jun-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started