Display the overflowed content when hovering over the element with CSS

CSSWeb DevelopmentFront End Technology

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>
raja
Published on 16-May-2018 13:03:35
Advertisements