How to get text-overflow ellipsis working on a table cell

If you’re looking for a way to clip a long text inside a table cell with an ellipsis, instead of wrapping to multiple lines, here’s some useful trick working on IE8+.

Exemple using CSS table and table-cell:

<div class="table">
	<div class="table-cell cell-full cell-ellipsis">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui.
		Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.
	</div>
	<div class="table-cell cell-noWrap">Lorem ipsum</div>
</div>	

.table { display:table; width:100%; border-collapse:collapse; }
.table-cell { display:table-cell; }

.cell-full { max-width:1px; width:100%; }
.cell-ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cell-noWrap { white-space:nowrap; }

• cell-full forces element to take all remaining space.
• cell-ellipsis get the CSS text-overflow ellipsis working.
• cell-noWrap prevents text content from splitting / breaking.

If you get trouble with borders making the table not fit the container, just add some box-sizing:

.table { box-sizing:border-box; }

Exemple with a HTML <table> (same CSS classes as above):

<table>
	<tr>
		<td class="cell-full cell-ellipsis">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui.
			Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.
		</td>
		<td class="cell-noWrap">Lorem ipsum</td>
	</tr>
</table>

Result:

Voilà. :)