JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<span class="elips">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis laudantium totam, dolorum maxime aliquid perferendis eum debitis illum pariatur hic amet, recusandae deleniti quas assumenda praesentium, nesciunt, suscipit dolore odio.</span>

CSS

.elips{
  white-space: nowrap;
  width: 200.4px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 10000ms ease-in-out;
}
.elips:hover{
  width: 350px;
}