html - 如何将表格的表格数据()中的内容限制在一定范围内？

Question

我有一个表数据，它可能会不时变化。它是为了填充用户评论。评论将存储在数据库中并显示在 html 表中以供引用。有时用户评论可能会太多，在这种时候我的 html 表格的高度和宽度也会增加以显示所有数据。但我想为表格中的标签提供固定的高度和宽度，并仅显示将从数据库中获取的一半用户评论。

例如

<table>
<th>id</th>
<th>Comments</th>
<th>User details</th>
<tr>
<td>1</td>

<td>Lorem ipsum dolor sit amet consectetuer adipiscing elit Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus</td>


<td>John smith</td>
</tr>
</table>

在上表中，注释列将由于其注释文本而得到扩展。我希望它只显示一行或两行

我怎样才能用 css 做到这一点？

Answer 1

你应该添加包装器来做到这一点:

<td>
    <div class="cont">Lorem ipsum dolor sit amet consectetuer adipiscing elit 
        Suspendisse eget est ac enim posuere adipiscing Nunc sollicitudin elit 
        sed facilisis fringilla lectus mauris eleifend tortor eu auctor nulla 
        odio in odio Cras sed orci Vestibulum ante ipsum primis in faucibus
   </div>
</td>

和 CSS:

.cont {
    overflow: hidden;
    width: 300px;  /* or other */
    -o-text-overflow: ellipsis;  /* Opera */
       text-overflow: ellipsis;
    white-space: nowrap;
}