javascript (jquery) added text comments dont linebreak/ ignore their div container

Im working on a JavaScript based comment system:

This is the Javascript that generates the comment html:

    $.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>';
    开发者_JS百科    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);

Now what happens when I add a new comment via a text input field is that the content of the comment ignores the div containers boundaries and does not linebreak:

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

This is the div containers css:

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

any suggestions?

This is the normal HTML behaviour. It happens if you have an unwrappable string (i.e. no symboly/whitespace) and is completely unrelated to JavaScript or jQuery.

The easiest solution is using the overflow: hidden CSS option.

PS: You should consider using templates instead of just creating your markup through strings. There are some nice template engines for JavaScript nowadays. Have a look at http://api.jquery.com/jquery.tmpl/ for example.