JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="big.ass.email@address-is.extremely.lame.de">big.ass.email@address-is.extremely.lame.de</a>
    </li>
</ul>

SCSS

li {
    
    list-style: none;
    
}
a {    
    max-width: 118px;    
    height:14px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:inline-block;
        word-wrap: break-all;
        font-family: Verdana;
        font-size: 11px;
    }