javascript - 如何防止文本超出 div？

Question

我已经研究了这个问题的几种解决方案，但没有一种对我有用。我将一个段落附加到一个 div 中，文本超出了该元素。这是我的代码。请帮忙。

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 appendMsg(user, msg) {
    var $cont = $("#chat-h");
    $cont[0].scrollTop = $cont[0].scrollHeight;
    $cont.append("<p class='msg' id='chat-p'><span>" + user + ":  </span> " + msg + " </p>");
}

Answer 1

使用text-overflow

div {
    text-overflow: clip;
}