html - 为什么我的表单生成的用户评论超出了固定宽度表格和 div 的边界？

Question

我应该先说明一下，我已经针对类似问题(例如 Set the table column width constant regardless of the amount of text in its cells?)尝试了在此站点上找到的多个修复程序，但均无济于事。

我正在通过 AJAX 生成用户评论表(每个表 1 条评论)。简而言之，输入文本并单击按钮会调用访问 php 文件的 AJAX 函数； php 文件然后根据我开发的算法按时间顺序显示用户评论。工作正常...(最新的相关代码如下)

$current.="<table border=\"1\" width=\"550px\" table-layout=\"fixed\">";
$current.="<tr width=\"550px\">";
$current.="<td width=\"60px\"><img src=\"" . $Picture1 . "\" style=\"float:left\"    
width=\"50px\" style=\"border: 0\" height=\"55px\"></td>";
$current.="<td width=\"485px\">";
$current.="<div style=\"width:485px\"><font size = \"2\" style=\"font-   
family:arial\">&nbsp;&nbsp;&nbsp<b>$user1</b></font>&nbsp;&nbsp;&nbsp";
$current.="<font size = \"2\" style=\"font-family:arial\">$usercomment1</font>";
$current.="</div></td>";
$current.="</tr>";
$current.="</table>";

除非用户评论超出表格的水平边界(宽度)(大约 60 个字符)。请注意，如上所示，在表格单元格中没有 div(并将每个 td、tr 和表格元素设置为固定宽度)，注释将表格的边界向右扩展(显示为显示边框)。令人惊奇的是，使用上面的代码(即 包含 div)，用户评论的文本实际上超出了表格范围(文本实际上只是简单地写在了正确的表格边框上，就像它不是即使在那里并继续向右移动，就好像 div/text 具有更高的 z-index 一样)。

现在，我的快速修复方法是为生成用户评论的表单的输入文本字段设置 maxlength='60'，但我不喜欢这种方法，因为将字符数限制为 60 就像 Twitter -精简版。关于为什么会出现我的表格问题的任何想法？

Answer 1

尝试对文本使用省略号

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

这将有助于文本不会溢出，否则请尝试使用 overflow 属性