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容器的边界，并且不换行:

https://i.stack.imgur.com/OV75v.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/