如何用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