属性文本溢出：省略号不起作用

问题描述：

我有一个表，其中<td>的样式如下。属性文本溢出：省略号不起作用

table.tvTable td{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    white-space: nowrap; // with this line i get one erally wide row 
    padding: 3px; 
}

单独地，它们的样式是width（包括px，％和*）。我也尝试设置整个表格的宽度（因为我希望其中一列使用屏幕上可用的最大宽度，所以不想这样做）。

但是，没有裁剪发生，更不用说省略号了。我在Ch和FF上。

答

这是我如何运作的demo。正如所提到的那样，您的确必须使用table-layout: fixed。通过CSS设置td的宽度似乎也可以工作，而无需在HTML中指定它。

如果您有任何问题，请让我知道！

啊，在那里！ 'table-layout：fixed'应该放在桌子上，而不是个人的''。不过，我有一句话。在你的例子中，你使用了'-webkit-text-overflow：ellipsis;'但是根据[this]（http://caniuse.com/#search=text-overflow），这是不需要的。老狗新花样，还是故意的？ – 2012-08-09 16:24:10

前者，我想！显然，由于Chrome和Safari似乎支持该属性，因此不需要供应商前缀！接得好：） – 2012-08-09 17:00:35

答

不幸的是，你必须使用并设置你的表的宽度。

哦，这是一个疑难杂症...我会尝试将宽度设置为90％或类似的东西，这对于浏览器来说是最好的，或者我正在放弃互联网！编辑：我没有table.tv表{ \t宽度：90％; } table.tvTable tr { \t table-layout：fixed; \t height：20px; }但它仍然不起作用。还有什么我可能会失踪？ – 2012-08-09 16:05:39

I ment this：table.tvTable td { \t overflow：hidden; \t text-overflow：ellipsis; \t -o-text-overflow：ellipsis; \t white-space：nowrap; \t padding：3px; \t table-layout：fixed; \t字体：14px快递; } – 2012-08-09 16:14:56

表格布局必须应用在表格上，而不是td – MatTheCat 2012-08-09 17:21:47

属性文本溢出：省略号不起作用

相关推荐