CSS | Show full text on hover
In this article, we are going to see, how we can display full text on hover using CSS. Just suppose we have a text containing three or more words (i.e: This is a demo text.) and the container which we have is able to hold only three words otherwise its generates some designing issues. So, in this case, we want to display only three words (i.e: This is a demo) and if we hover over the text then the full text will display.
This is an example code to do so:
<!DOCTYPE html>
<html>
<head>
<title>Show full text on hover</title>
<style>
.demo
{
width: 100px;
text-overflow: ellipsis;
cursor: pointer;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
}
.demo:hover
{
overflow: visible;
white-space: normal;
}
</style>
</head>
<body>
<div class="demo">
This is demo text
</div>
</body>
</html>
