流体宽度表格单元格中的文本溢出省略号

Question

我正在尝试获得一个流量宽度表，其中单元格中的文本不允许流到另一条线上，并且当它太长而不适合时将使用text-overflow:ellipsis。

我尝试了以下测试：

HTML：

<table>
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat placerat risus. Maecenas lectus orci, commodo id varius ac, vulputate eget elit. Nunc laoreet feugiat aliquet.</td>
    </tr>
</table>

CSS：

table { width: 100%; }

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

但正如你在下面的小提琴中看到的那样，省略号不起作用：

http://jsfiddle.net/p3pXc/

有解决方案吗？

Answer 1

不幸的是，现在可以在动态宽度元素上使用CSS省略号。

添加

display: block;
width: 300px;

例如，

将创建省略号。但在你的情况下，这不会做。

您必须回退JavaScript解决方案，例如jquery.ellipsis插件 有关详细信息，请参阅此问题：Insert ellipsis (...) into HTML tag if content too wide

---

修改：

实际上，如果你只想让列延伸到表格的所有宽度，而不是越过屏幕（并且只保留在一行上），你应该添加

table { 
    width: 100%; 
    table-layout: fixed; 
}

请参阅更新的小提琴：http://jsfiddle.net/7v72L/

（感谢@CBroe的建议）

Answer 2

使用JavaScript，此问题已解决here，达到以下说明的效果：