JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <table border="1">
        <tr>
            <td>This is a test.</td>
            <td>This is a td with line breaks in the text.</td>
            <td>This is a test.</td>
        </tr>
    </table>
</div>

CSS

#container {
    width:500px;
}
table { 
    width:100%;
    table-layout:fixed; 
}
table tr { 
    height:1em;  
}
td {
    word-break: break-word;  
}

JavaScript

var $tds = $('td');

$tds.each(function(){
    
    var $td = $(this), length = $.trim($td.text()).length;

    if( length > 22 ) {
        $td.css('background-color', 'red');
    }
    
});