CSS div-table and text-overflow:ellipsis

css, layout

Solution

Use max-width on .table-cell to fix it:

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

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

Problem

I have a div with a display of table. I want for this table to take up 100% of the page. Within the table will be one row with several cells (display style of table-cell). My goal is for a CSS solution that allows the table-cells to show an ellipsis if the text is too long. I have put together a simple example jsFIddle that shows the issue. Can anyone lead me in the right direction to get the cells to show the 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> ```

Original source