如何用css做響應文本溢出？

Question

我正在嘗試做一個列表，比如Gmail郵件列表。 有一個td會得到一個長文本。我想隱藏溢出寬度爲td的文字。

我想這一點：

JsFiddle

<table class="table"> 
<tr style="width: auto;"> 
    <td>Solicitante</td> 
    <td>Tipo</td> 
    <td style="text-overflow: clip; overflow: visible; white-space: nowrap;">Este é um resumo bem maior que o de baixo, para ser testado sassasa</td> 
    <td>10/12/2014</td> 
</tr> 
    <tr style="width: auto;"> 
    <td>Solicitante</td> 
    <td>Tipo</td> 
    <td style="text-overflow: clip; overflow: hidden;">Este é um resumo bla bla bla bla bla bla bla</td> 
    <td>10/12/2014</td> 
</tr> 

隨着white-space: nowrap;表變得比BoxView中的大。如果我刪除white-space: nowrap;溢出文本繼續行。 如何隱藏響應表中的溢出文本？謝謝

Answer 1

您需要使用table-layout:fixed; + width以控制最大寬度table或td。 例如：500px的表格和您的td以50％溢出。

<table class="table" style=" 
     table-layout:fixed; 
     width:500px;/* any value-unit */ 
"> 
    <tr style=""> 
     <td>Solicitante</td> 
     <td>Tipo</td> 
     <td style=" 
       width:50%;/* any value-unit */ 
       text-overflow: ellipsis; /* draw dots */ 
       overflow: hidden; 
       white-space: nowrap; 
">Este é um resumo bem maior que o de baixo, para ser testado sassasa</td> 
     <td>10/12/2014</td> 
    </tr> 
    <tr style="width: auto;"> 
     <td>Solicitante</td> 
     <td>Tipo</td> 
     <td>Este é um resumo</td> 
     <td>10/12/2014</td> 
    </tr> 
</table> 

DEMO