Html 如何将表的表数据(<;td>;)中的内容限制在一定的范围内?

Html 如何将表的表数据(<;td>;)中的内容限制在一定的范围内?,html,css,Html,Css,我有一个数据表,它可能会随时间而变化。它用于填充用户注释。注释将存储在数据库中,并显示在html表中以供参考。有时,用户的评论可能会被过度引用,在这种情况下,我的html表格的高度和宽度也会增加,以显示所有数据。但是我想给出表中标记的固定高度和宽度,并且只显示来自数据库的用户注释的一半 比如说 <table> <th>id</th> <th>Comments</th> <th>User details</th>

我有一个数据表,它可能会随时间而变化。它用于填充用户注释。注释将存储在数据库中,并显示在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>

身份证件
评论
用户详细信息
1.
Lorem ipsum door sat amet continuet adipise elite Suspendisse e est ac enim posuere adipise Nunc sollicitudin elite sed facibus中的Elite sed facilisis frontilla lectus mauris eleifend toror eu auctor nulla odio,在faucibus中,Aucio Cras sed orci ante ipsum primis
约翰牛
在上表中,注释列将因其exeeded文本而展开。我希望它只显示一行或两行


如何使用css呢?

使用css,将
溢出:隐藏
最大宽度
最大高度
一起分配给内容。这应该可以解决问题。

<td style="width: 300px;">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>
Lorem ipsum door seat amet continuet adipsive elite Suspendisse e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e e

300px可以是您的选择。

您应该添加包装器来完成此操作:

<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>

更好的选择可能是在将注释加载到服务器端的页面之前截断注释。然后,您可以附加一个省略号以显示它被截断,并带有指向完整注释的链接——这比简单地隐藏一些文本更方便用户

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