JSFiddle - React, Tailwind, and code Playground

by Cedric Gourville

HTML

<div style="width:400px;display:block;">
<table>
  <tr>
    <td>one</td><td>two</td><td>three</td>
  </tr>
  <tr>
    <td><p>this is a very very long text to show what i want to achieve</p></td><td>two</td><td>three</td>
  </tr>
</table>
</div>

CSS

table{
  width:100%;
}
td {
	max-width: 150px !important; 
	
}
td p{
	
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
      padding: 3px 5px;
}