JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="inner-block">
        Hello world
    </div>
    <div class="inner-block">
        <table>
            <tr>
                <td>
        <li><a href="#"> abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        </a></li>    
                </td>
            </tr>
        </table>
    </div>    
    <div class="inner-block break-all">
        <table>
            <tr>
                <td>
                    <ul class="list">
                        <li>
                            <a href="#">                abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                            </a>
                        </li>                          
                    </ul>
                </td>
            </tr>
        </table>
    </div>    
</div>

CSS

#container {
    background-color:green;
    width:150px;
    padding:5px;
}

.inner-block {
    margin:5px auto;
    width:100%;
    background-color:red;
    word-wrap:break-word;
}

.break-all {
    word-break: break-all;
}

.list {
    list-style-position:inside;
    padding-left:3%;
}