Show full text on hover

360 Views

Show full text on hover

CSS | Show full text on hover

In this arrticle we are going to see, how we can display full text on hover using css. Just suppose we have a text contining three or more words (i.e: This is demo text.) and the container which we have is able to hold only three word other wise its geinerate some designing issue. So in this case we want to display only three word (i.e: This is 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>
Tags:-
HTML
CSS