I have tried multiple solutions for this issue, but none seem to be working for me. When I append a paragraph to a div, the text extends beyond the element. Below is the code I am using. Any assistance would be greatly appreciated.
CSS:
.chat-h {
margin-left: 7px;
width: 249px;
background: red;
}
#chat-p {
width: 150px;
background-color: #fff;
word-wrap: break-word;
}
.msg span {
font-weight: bold;
color: blue;
}
JQuery:
function appendMessage(user, message) {
var container = $("#chat-h");
container[0].scrollTop = container[0].scrollHeight;
container.append("<p class='msg' id='chat-p'><span>" + user + ": </span>" + message + "</p>");
}