JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<a class="one" href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a>
</div>
<div></div>
<div></div>
<div></div>
<div>
<a class="two" href="#">Reeeeeeeeeeeeeaallllllly Looooon Liiink Teeeext</a>
</div>
<div></div>
<div></div>
<div></div>

CSS

div{
position: relative;
height: 50px;
width: 80px;
border: 2px solid;
overflow: visible;
white-space: nowrap;
z-index: 1;
float: left;
}
a{
overflow: hidden;
background: yellow;
white-space: nowrap;
display: block;
text-overflow: ellipsis;
}
a.one{
width: 210px;
}
a.two{
width: 130px;
}