Question

我正在尝试列出Gmail电子邮件列表。有一个td会得到一个很长的文字。我想隐藏溢出td宽度的文本。

我正在尝试这个：

<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

如何用css做响应文本溢出？

1 个答案: