Question

我有一张表

<table class="tbl" border="1">   
    <tr>
        <td width="20%"><span class="spn">column one is a long one</span></td>
        <td width="60%"><span class="spn">column two</span></td>
        <td width="20%"><span class="spn">column three is the longest of all columns</span></td>
    </tr>
</table>

和CSS-Settings：

.spn
{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: inherit;
  color: red;    
}

.tbl
{
  width: 300px
}

我希望第一列和第三列的宽度为20％，第二列应该是300px表宽度的60％。文本应填写完整的td，最后以...结尾。怎么做到这一点？

http://jsfiddle.net/8jgmnyn5/

Answer 1

你有两个问题。

对于表格，您需要table-layout:fixed。否则，它将优先显示给定列宽的所有内容。
跨度为width:inherit，但表格列的宽度为20％，因此跨度为20％的20％，我确定这不是您的意思。所以摆脱跨度上的width。 display:block类型元素不需要宽度。

.spn {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*width: inherit;*/
  color: red;    
}

.tbl
{
  width: 300px;
  table-layout:fixed;
}

然后结果看起来像this fiddle。

Answer 2

你想要这样的东西吗？

http://jsfiddle.net/8jgmnyn5/2/

你改变的css看起来像这样：

.spn {
  display: block;
  color: red;    
}

.spn:after {
    content: "…";
}

CSS text-overflow：表中的省略号

2 个答案: