CSS 文本溢出：Table 中的省略号

Question

我有一个Table

<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-设置：

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

.tbl
{
  width: 300px
}

我希望第一列和第三列的宽度为 20%，第二列的宽度应为 300px table 宽度的 60%。文本应填写完整的 td 并在末尾以 ... 结尾。如何实现？

http://jsfiddle.net/8jgmnyn5/

Answer 1

你想要这样的东西吗？

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

你修改后的 css 看起来像这样：

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

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

Answer 2

你有两个问题。

对于 table，您需要 table-layout:fixed。否则它将优先显示超过给定列宽的所有内容。
跨度为 width:inherit，但 table 列的宽度为 20%，因此跨度为 20% 的 20%，我确定这不是您的意思。所以去掉 span 上的 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。

CSS 文本溢出：Table 中的省略号

CSS text-overflow: ellipsis in Table

html

css

html-table