JSFiddle - React, Tailwind, and code Playground

by feesler

HTML

<table border="1">
	<tr>
		<td class="ellipsis_cell">
			<div title="This cells has more content"><span>This cells has more content</span></div>
		</td>
		<td class="nowrap">Less content here</td>
	</tr>
</table>

CSS

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

td
{
	padding: 5px;
}


.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;
}