Question

我有这个：

<table>
    <tr>
        <td> 
            <br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            <br/>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            <br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
            <br/>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
            <br/>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
            <br/>non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </td>
    </tr>
</table>

如何设置行高？我希望额外的行被垂直截断。我已经尝试过了：

td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

它可以水平但不垂直工作。你有什么窍门吗？有时css感觉就像在做伏都教。

Answer 1

我相信表格单元格和行会增长到其内部内容的高度。我不认为没有将内容包装在div中，然后应用样式来限制div的大小......

此外，似乎换行（
）搞砸了包装词......

以下是一个示例：jsFiddle showing text-overflow in td

以下是我使用的代码：（HTML）

<table>
<tr>
    <td>
        <div class="container-td">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </td>
</tr>

（CSS）

.container-td {
height: 100px;
line-height: 100px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
white-space: nowrap;
text-overflow: ellipsis;}

垂直截断包含<br/>的文本

1 个答案: