CSS table and text overflow: ellipsis

Question

I have a div with a table display. I want this table to occupy 100% of the page. Inside the table there will be one row with several cells (display style of the table-cell). My goal is a CSS solution that allows table cells to show ellipses if the text is too long. I put together a simple jsFIddle example that shows the problem.

Can someone lead me in the right direction so that the cells show an ellipsis?

jsfiddle

<div class="table-wrap-wrapper"> <div class="table"> <div class="table-row"> <div class="table-cell data"> <span>This_is_a_really_long_username_that_is_too_long</span> </div> <div class="table-cell"> </div> <div class="table-cell data"> <span>This_is_a_really_long_emailAddress_that_is_too_long</span> </div> <div class="table-cell"> </div> <div class="table-cell data"> <span>This_is_a_really_long_string_that_is_too_long</span> </div> </div> </div> </div> 

Answer 1

Use max-width for .table-cell to fix this:

 .table-cell { max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 

http://jsfiddle.net/emturano/uDqzP/10/