title: How to prevent text from going outside a div?
body: <p>I have looked at several solutions to this question but none of them work for me. I am appending a paragraph to a div and the text goes out of the element. Here is my code. Please help.</p>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>and JQuery</p>
  
  <pre><code>function appendMsg(user, msg) {
      var $cont = $("#chat-h");
      $cont[0].scrollTop = $cont[0].scrollHeight;
      $cont.append("&lt;p class='msg' id='chat-p'&gt;&lt;span&gt;" + user + ":  &lt;/span&gt; " + msg + " &lt;/p&gt;");
  }
  </code></pre>