JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table style="width:300px;">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>short</td>
    <td>Super long name that overflows</td> 
    <td>94</td>
  </tr>
</table>

CSS

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflowing {
  color: red;
}

JavaScript

$("td").each( function() {

	if ( this.scrollWidth > this.clientWidth ) {
  
     $(this).addClass("overflowing");
  
  }

});