CSS div表格和文本溢出:省略号

Question

我有一个显示为表格的div。我希望这个表格占据整个页面的100％。在表格内将有一行具有多个单元格（显示样式为table-cell）。我的目标是使用CSS解决方案，如果文本过长，则允许table-cell显示省略号。我已经准备了一个简单的示例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>

- Aaron Hickman

Answer 1

使用max-width属性来修复.table-cell：

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

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

- eclipsis

---

但是它只有50像素宽，而不是跨越100％...我希望它尽可能占用空间，然后溢出到省略号。 - Aaron Hickman

你需要在某个地方定义宽度（除非你想使用JavaScript）。 - Wex

@AaronHickman：在.table-cell上使用max-width: 100%，可以使.table-cell充满整个宽度。但是，如果你想让省略号起作用，就不应该这样做。 - eclipsis

谢谢，看起来这确实是我想要的！ http://jsfiddle.net/311chaos/uDqzP/11/ - Aaron Hickman