JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td><div></div></td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</br>

ENTER TEST TEXT HERE: <input type="text" ng-model="$scope.text"></input>

CSS

table{
    border: 1px solid;
    table-layout: fixed; 
    border-collapse: collapse; 
}

tr{
    vertical-align: top;
}

td{ 
    word-break:break-all;
    width: 80px;
    height: 40px; 
    border: 1px solid;
    border-collapse: collapse; 
    overflow: hidden; 
    background-color:yellow;
}

div{
    background-color:cyan;
    width: 80px;
    height: 40px; 
    overflow: hidden;
}

JavaScript

function checkOverflow(el){
    var curOverflow = el.style.overflow;

    if ( !curOverflow || curOverflow === "visible" )
        el.style.overflow = "hidden";

    var isOverflowing = el.clientWidth < el.scrollWidth 
    || el.clientHeight < el.scrollHeight;

    el.style.overflow = curOverflow;

    return isOverflowing;
}
    
$('input').on('keyup',function(){
    var $input = $(this);
    var $div = $('table div');
    var text = $(this).val();

    $div.attr('title',text);
    $div.text(text);

    while(checkOverflow($div[0])){
        var short_text = $div.text().substring(0, $div.text().length - 4) + "...";
        $div.text(short_text);
    }
});