JSFiddle - React, Tailwind, and code Playground

by tonydew

HTML

<table>
    <tr>
        <td class="first">Here is some text</http://jsfiddle.net/tonydew/gCnXh/#updatetd>
        <td class="second">Here is some more text. A lot more text than the first one. In fact there is so much text you'd think it was a waste of time to type all of it.</td>
    </tr>
</table>

CSS

table {
    table-layout: fixed;
    width: 100%;
}
td {
    border: 1px solid black;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.first {
    width: 25%;
}
.second {
    width: 75%;
}

JavaScript

$(function() {
    $('td').each(function(i, el) {
        var element = $(this)
                      .clone()
                      .css({
                          display: 'inline',
                          width: 'auto',
                          visibility: 'hidden'})
                      .appendTo('body');

        if( element.width() > $(this).width() ) {
          alert('Ellipsis Active!');
        } else {
            alert('Ellipsis NOT Active!');
        }
        element.remove();
    });
});