JSFiddle - React, Tailwind, and code Playground

HTML

<div>
short words and lots of them to show wrap or not
</div>

<div>
Onelonglinetorulethemallandinthedarknessbindthem
</div>

CSS

div{
  background-color: white;
  padding: 1em;
  border: 1px solid silver;
  border-radius: 1em;
  
  width: 15em;
  text-overflow: ellipsis;
  overflow: hidden;
}
div:hover{
  overflow: visible;
}