JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<ul>
    <li class="c1">
        <a href="[email protected]">[email protected]</a>
    </li>
    <li class="c2">
        <a href="[email protected]">big.ass.email@<wbr />address-is&#8203;.extremely.lame.de</a>
    </li>
</ul>

SCSS

li.c1 {
    width: 118px;
    list-style: none;
    margin-bottom: 12px;
    background-color: yellow;
    a {
        word-wrap: break-word;
        font-family: Verdana;
        font-size: 11px;
    }
}
li.c2 {
    width: 118px;
    list-style: none;
    background-color: yellow;
    a {
        font-family: Verdana;
        font-size: 11px;
        -webkit-hyphens: manual;
        
        
        /* these do not work in chrome
        -webkit-hyphenate-limit-lines: 3;
        -webkit-hyphenate-limit-zone: 50%;
        -webkit-hyphenate-character: "\@";
        -webkit-hyphenate-limit-before: 5;
        */
    }
}