CSS 文本溢出：表格中的省略号答案

【问题标题】：CSS text-overflow: ellipsis in TableCSS 文本溢出：表格中的省略号
【发布时间】：2015-07-06 00:02:19
【问题描述】：

我有一张桌子

<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 表格宽度的 60%。文本应填充完整的 td 并以 ... 结尾。如何做到这一点？

http://jsfiddle.net/8jgmnyn5/

【问题讨论】：

使用 jquery 或 javascript 怎么样？这样一来，解决起来并不难。或者你想用纯 css 来实现这个？
@d_z90 - 仅在可能的情况下使用 css
Why doesn't CSS ellipsis work in table cell?的可能重复
@ChrisSpittles 不是重复的。该用户已经解决了省略号的问题。

标签： html css html-table

【解决方案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。

【讨论】：

【解决方案2】：

你想要这样的东西吗？

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

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

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

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

【讨论】：

几乎，我想避免使用white-space: nowrap; 换行 - 文本不适合时可以被切断