JSFiddle - React, Tailwind, and code Playground

by tonydew

HTML

<table>
    <tr>
        <td class="first">Here is some text</td>
        <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 isEllipsisActive(e) {
    console.log(e.offsetWidth + '/' + e.scrollWidth + ' - ' + (e.offsetWidth < e.scrollWidth));
    return (e.offsetWidth < e.scrollWidth);
}

$(function () {
	$('td').each(function (i, el) {
		if (isEllipsisActive(el)) {
            alert('Ellipsis Active!');
        } else {
            alert('Ellipsis NOT Active!');
        }
	});
});