三点-溢出：省略号

Question

我的问题是，为什么“ text-overflow：省略号”； 对我不起作用？ 我的页面上有表格，我想在cell（td）中缩短一些文本。 如您所见，我在CSS中没有width参数。 我从json获取此值，然后使用jquery进行设置。 也许这是问题所在？ 如果是这样，我该如何解决？

#myTable2 td{
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:47px;
    border-top: solid 1px #ebebeb;
    border-spacing:none;
    cellpadding: 0;
    cellspacing: 0;
    font-family:arial;
    font-size: 8pt;
    color: #3D3D3D;
    padding: 4px;
}

我在Chrome 19，最新的Firefox和IE9中对其进行了测试。

Answer 1

您需要一张桌子的宽度和table-layout：fixed;

http://jsfiddle.net/CagPK/

#myTable2 td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}
#myTable2 
{
    table-layout:fixed;
    width: 100px;
}
​

Answer 2

text-overflow适用于display: block元素，而display: table-cell单元格则display: table-cell元素。 将文本包含在<div> 应该可以工作 （在单击文本时，小提琴将设置宽度）。