Home > Article > Web Front-end > Show overflowing content when hovering over element using CSS
Show overflowing content when hovering over element using CSS
- WBOYforward
- 2023-09-12 16:53:021482browse
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>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!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete