JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="text">this is a very long text that goes on and on and on and on.</div>
</div>

CSS

#wrapper {background-color: #090;}
#text {background-color: #099; width: 100px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}