Question

我的基本省略号样式和标记如下（fiddle）：

.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<table>
<tbody>
<tr>
    <td>Row Start (1)</td>
    <td class="ellipsis">Lectus ligula uspendisse tiam per sodales feugiat tempus ante pede vitae amet conubia raesent tincidunt n feugiat id ad mi dapibus</td>
    <td>Row End</td>
</tr>
<tr>
    <td>Row Start (2)</td>
    <td class="ellipsis">Placerat consectetuer inceptos dictum mollis adipiscing placerat sed tincidunt ullam id onec lectus sagittis consequat conubia tempus eleifend ad orbi risus hac dolor accumsan commodo a eros ed consectetuer odio feugiat dignissim dictum at ullam ligula mollis sollicitudin rutrum viverra in feugiat conubia metus uspendisse sit non imperdiet unc liquam</td>
    <td>Row End</td>
</tr>
</tbody>
</table>

...但它只是使我的表拉伸以适应一行中的所有内容，文档获得一个漂亮的水平滚动。对于非表块级元素，相同的代码按预期工作。

是否有一种解决方法不会强迫我使用固定宽度？

Answer 1

http://jsbin.com/jehaxequ/1/edit

TD 最大宽度是此处的解决方案。如果你不知道td的最大宽度，问题就不容易用CSS做，但是可以使用一点jquery或javascript来计算td的最大宽度，并将它“live”添加到你的元素属性中

Answer 2

添加max-width属性。

JSBIN

椭圆在100％宽度表中

2 个答案: