I've got a <table> that's set to 100% width. Inside one of the <td> elements, there's a div containing a text string that I'd like to truncate with an ellipsis if it overflows.
Initially, in my JavaScript code, I'm setting the width of the <div> element equal to the width of the corresponding <td>, which works as expected upon page load or refresh. However, I'm having trouble making it work when the browser window is resized.
(Please disregard the actual purpose behind this scenario. It's just a simplified example for this question.)
Can someone guide me on how I can achieve automatic truncation with ellipsis on resize?
function adjustWidth() {
$('.text-div').css('width', $(".container-td").css('width'));
}.text-div {
width: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="adjustWidth()" onresize="adjustWidth()">
<table style="width: 100%">
<tr>
<td class="container-td">
<div class="text-div">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
</td>
</tr>
</table>
</body>