JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    This is text that doesn't fit inside, but is visible on hover.
</div>

CSS

#test {
    width:50px;
    text-overflow: ellipsis;
    white-space: nowrap;
	overflow: hidden;
}

#test:hover {
    overflow: visible;
}