CSS div-table和文本溢出:省略

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.

我有一个显示表格的div。我希望这张桌子占这页的百分之百。在表中有一行包含多个单元格(表单元格的显示样式)。我的目标是使用CSS解决方案，如果文本太长，表格单元格可以显示省略号。我已经组合了一个简单的例子jsFIddle，它展示了这个问题。

Can anyone lead me in the right direction to get the cells to show the ellipsis?

有没有人能引导我找到正确的方向，让细胞显示出省略号?

jsfiddle

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>

1 个解决方案

#1

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

在.table-cell上使用max-width进行修改:

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

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

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