JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href="#">adsfasadf</a></li>
<li><a>adsfasadf adsfasadf </a></li>
<li><a>adsfas adfad sfasadf adsfasadf </a></li>
<li><a href="#" style="text-overflow:clip;">aadsfasadf adsfasadf adsfasadf dsfasadf</a></li>
<li><a href="#">aadsfasadf adsfasadf adsfasadf dsfasadf</a></li>
</ul>

CSS

a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 180px; background: #eee; padding: 20px; }
* {zoom:1;}