如何设置省略号了TD

Question

我的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的省略号。

Answer 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>