CSS div 表和文本溢出 :ellipsis

Question

我有一个带有表格显示的 div。我想让这张表占据页面的 100%。在表格中，一行将包含多个单元格(表格单元格的显示样式)。我的目标是一个 CSS 解决方案，它允许表格单元格在文本太长时显示省略号。我整理了一个显示问题的简单示例 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>

Answer 1

在 .table-cell 上使用 max-width 来修复它:

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

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