html - 如何用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;，溢出文本将继续成行。如何在响应式表格中 overflow hidden 文本？谢谢

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