JSFiddle - React, Tailwind, and code Playground

HTML

<h2>The Right Way</h2>
<table border="1" class="my-table">
    <tr>
        <td width="10%">1.</td>
        <td width="90%" class="overflow-ellipsis">
            In this TD, wrapping still occurs if there is white space.
            ButIfThereIsAReallyLongWordOrStringOfCharactersThenThisWillNotWrapButUseEllipsis
        </td>
    </tr>
    <tr>
        <td width="10%">2.</td>
        <td width="90%" class="overflow-ellipsis" style="white-space:nowrap;">
            In this TD, wrapping will not occur, even if there is white space.
        </td>
    </tr>
</table>

<!-- The following code shows you the WRONG way to do it -->
<br/><br/>
<h2>The Wrong Way</h2>
<table border="1" class="my-table-BROKEN">
    <tr>
        <td>1.</td>
        <td class="overflow-ellipsis-BROKEN">
This one is broken and will not ever have ellipsis when it overflows it's container.
        </td>
    </tr>
</table>

CSS

.my-table {
    table-layout: fixed;
    width: 100%;
}

.overflow-ellipsis {
    /* white-space:nowrap; */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The following code shows you the WRONG way to do it */

.overflow-ellipsis-BROKEN {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #e99;
}

.my-table-BROKEN {
    width: 300px;
}