Vous êtes ici : Accueil du blogCSS » How to get text-overflow ellipsis working on a table cell

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.
Lorem ipsum
<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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec. Lorem ipsum

Voilà. :)

Commentaires (1)

Lâcher un com'

  1. Patiko
    20 juillet 2016 à 13h59

    You’ve just saved my life, thank you. That « max-width: 1px » is magic! ♡

Laisser un commentaire

Balises HTML autorisées dans la rédaction du message :
<strong> <a> <code> <q>

Les champs marqués d'une étoile sont obligatoires.

Current month ye@r day *