JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<span class="display-elipsis">
	This is the text which will be shorten with the help of css itself no need for any javascript.
</span>

CSS

.display-elipsis {
	display:block;
	text-overflow: ellipsis;
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
}

span:hover {
	width: 100%;
	overflow: visible;
	white-space: none;
	text-overflow: none;
}