如何設置省略號了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>