Syntax error Display the overflowed content when hovering over the element with CSS

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:

Example

Live Demo

<!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 to see the complete text below:</p>
      <br>
      <div class = "demo" style = "text-overflow:clip;">Demo Text that will hide in this box.</div>
   </body>
</html>
Updated on: 2020-06-23T15:48:59+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements