Community Learn Tools Library Leisure

English

Home > Web Front-end > CSS Tutorial > Show overflowing content when hovering over element using CSS

Show overflowing content when hovering over element using CSS

WBOY

Release： 2023-09-12 16:53:02

forward

1590 people have browsed it

Show overflowing content when hovering over element using CSS

To display overflow content when hovering over an element, you can try running 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>

Copy after login

The above is the detailed content of Show overflowing content when hovering over element using CSS. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：Overview of new features of CSS3: How to use CSS3 to achieve rotation effects Next article：How to place an image or video inside a silhouette?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn