JSFiddle - React, Tailwind, and code Playground

by bjelline

HTML

<table style="width: 100%;">
    <colgroup>
        <col style="width: 15%;" />
        <col style="width: 70%;" />
        <col style="width: 5%;" />
        <col style="width: 5%;" />
        <col style="width: 5%;" />
    </colgroup>
    <tr>
        <td class="fixed">Fixed Size</td>
        <td class="eltdpsis">this text is very very long and it goes on and on and on and on but does not wrap</td>
        <td>short</td>
        <td>one more tab</td>
        <td>another tab</td>
    </tr>
    <tr>
        <td class="fixed">Fixed Size</td>
        <td class="eltdpsis">this text is very very long and it goes on and on and on and on but does not wrap</td>
        <td>short</td>
        <td>one more tab</td>
        <td>another tab</td>
    </tr>
</table>

CSS

.heightlimited {
    background-color: red;
    height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JavaScript

$('td').wrapInner('<span class="heightlimited">');