JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DLD_App" data-appname="">
<img src=""></img>
<h1></h1>
<a href="">here is some text to be ellipsis here is some text to be ellipsis here is some text to be ellipsis here is some text to be ellipsis </a>
</div>

CSS

.DLD_App a {
    position:relative;
    height:18px;
    width:140px;
    margin:0 5px 0 5px; padding:0;
    font:bold 15px/18px Arial;
    text-align:center;
    text-decoration:none;
    color:#f00;
    overflow:hidden;
    text-overflow:"...";
    white-space:nowrap;
    display: inline-block;
}