JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
	<tr>
		<td class="ellipsis_cell">
			<div title="This cells has more content"><span>This cells has more contentasfsadfsdafsddddddddd ddddddddddddd dddddddddddddddddds asfsd fsdfsdfsd f f sdf sd fs df sdf </span></div>
		</td>
		<td class="nowrap">Less content here</td>
	</tr>
</table>

CSS

table
{
	width: 100%;
	border-width: 1px;
}

td
{
  width:50%;
  height:68px;
	padding: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: -o-ellipsis-lastline;
  -webkit-line-clamp: 3;
  padding-left: 4px;
}


.nowrap
{
	white-space: nowrap;
}


.ellipsis_cell > div
{
	position: relative;
	overflow: hidden;
	height: 1em;
}


/* visible content */
.ellipsis_cell > div > span
{
	display: block;
	position: absolute;	
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1em;		/* for vertical align of text */
}


/* cell stretching content */
.ellipsis_cell > div:after
{
	content: attr(title);
	overflow: hidden;
	height: 0;
	display: block;
}