在div内水平包含p文本

Question

我为网站制作了一个朋友列表脚本，并在聊天部分发现了一些有趣的UI问题。当很长时间的聊天消息被添加到具有属性overflow: scroll的聊天内容div时，它会将其水平延伸出来，如下所示：

我需要这样做，以便内容div中的<p>标记包含到下一行，如果它们比内容div更宽，那么这不会发生。我的css现在看起来像这样：

#chatContentDiv {
    height: 70%;
    width: 100%;
    overflow: scroll;
    background: rgba(0, 0, 75, 0.3);
    text-align: left;
}

#chatContentDiv p {
    font-size: medium;
    width: 100%;
    padding: 10px;
    margin: 0;
}

有没有办法实现这个目标？我需要它仍然可以上下滚动，但如果消息包含很长的单词，则不能让它横向延伸。

Answer 1

试试这个......

使用word-wrap属性来破解单词，如果它比包装器

更宽

#chatContentDiv p {
    font-size: medium;
    width: 100%;
    word-wrap: break-word;
    padding: 10px;
    margin: 0;
}