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

标签 html css html-table

我应该先说明一下,我已经针对类似问题(例如 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 -精简版。关于为什么会出现我的表格问题的任何想法?

最佳答案

尝试对文本使用省略号

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

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

关于html - 为什么我的表单生成的用户评论超出了固定宽度表格和 div 的边界?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19010733/

相关文章:

javascript - 互联网机器人 - 填写表格

html - 在折叠时将 Bootstrap 导航元素对齐在同一行

html - 如何使用 css 通过鼠标悬停显示与 map 标记相关的信息?

javascript - innerHTML 会影响性能吗?

html - 如何使 td 宽度固定?

html - 我怎样才能有一张 table 尊重宽度:100% and vertical-align:middle?

html - 删除页脚下的小空白

javascript - jquery中的更改事件

html - 更改阴影的大小而不是实际的 png

jquery - 如何从表中删除除前两行和最后一行之外的所有行?