如何为 TD 设置省略号答案

【问题标题】：How to set ellipsis for a TD如何为 TD 设置省略号
【发布时间】：2015-01-11 04:43:20
【问题描述】：

我有以下 JSFiddle：http://jsfiddle.net/nm85L6dr/

HTML：

<div class="module fade">
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</span>
</div>

<table>
    <tr class="module fade">
        <td>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</td>
    </tr>
</table>

有没有办法为 TD 设置省略号。

【问题讨论】：

标签： javascript jquery html css ellipsis

【解决方案1】：

您必须将规则移动到<td> 并设置position: absolute。

body {
  padding: 20px;
  font: 1.2em/1.2em 'Open Sans', sans-serif;
}
.module {
  width: 250px;
  margin: 0 0 1em 0;
  overflow: hidden;
}
.module span, .module td {
  margin: 0;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

td.fade { 
  position: absolute;
}

<div class="module fade">
  <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</span>
</div>

<table>
    <tr>
        <td class="module fade">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</td>
    </tr>
</table>

【讨论】：