javascript (jquery) 添加文本注释不要换行/忽略它们的 div 容器

Question

我正在开发基于 JavaScript 的评论系统:

这是生成评论 html 的 Javascript:

    $.each(comments.user,function(key,value)
        {
        comment_string += '<div class = "r_comment_header">';
        comment_string+= '<a class = "r_comment_user" href = "profile.php?id=' + comments.user_id[key] + '" title = "Profile of ' + value + '">' + value + ' </a>';
        if(comments.pm_button[key])
            comment_string+= '<input type = "button" class = "comment_send_pm" value = "Message" name = "' + comments.user_id[key] + '" title = "Send this user a private message"/>';
        comment_string+= '<span class = "r_comment_time">' + comments.time[key] + '</span>';
        comment_string+= '</div>';
        comment_string+= comments.content[key];
        comment_string+= '<div class = "comment_abuse_wrapper">';
        comment_string+= '<input type = "button" class = "comment_report_abuse" name = "' + comments.id[key] + '" value = "Report abuse" title  = "Report this comment as inappropriate content"/>';
        comment_string+= '</div>';
        });

    $('#request_comments').html(comment_string);

现在，当我通过文本输入字段添加新评论时，评论的内容会忽略 div 容器边界并且不会换行:

http://i.imgur.com/V85Vc.png

这是 div 容器的 css:

#request_comments
{
width:658px;
padding: 10px;
margin: 10px 0 0 10px;
}

有什么建议吗？

Answer 1

这是正常的 HTML 行为。如果您有一个不可包装的字符串(即没有符号/空格)并且与 JavaScript 或 jQuery 完全无关，就会发生这种情况。

最简单的解决方案是使用 overflow: hidden CSS 选项。

PS:您应该考虑使用模板，而不是仅仅通过字符串创建标记。现在有一些不错的 JavaScript 模板引擎。看看http://api.jquery.com/jquery.tmpl/例如。