JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<ul>
    <li>
        <a href="#"><span>Very long text very long text very long text</span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a>
    </li>
    
     <li>
        <a href="#"><span>fdjfkalsdjfklsajfkldsjflkasjfkldjflkasjfldasjfklas</span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a>
    </li>
</ul>

CSS

img{
    width: 20px;
}

li{
    list-style-type: none;
}

a{  
  text-decoration: none;
}

a span{
  width: 100px;
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a:hover{
    text-decoration: underline;
    color: red;
}