html - 在 div 中水平包含 p 文本

Question

我为网站制作了一个好友列表脚本，发现聊天部分出现了一些看起来很滑稽的 UI 问题。当一条很长的聊天消息被添加到具有属性 overflow: scroll 的聊天内容 div 时, 它水平拉伸(stretch)它，像这样:

我需要让它成为 <p>如果内容 div 中的标签比内容 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 属性来分隔单词，如果它比 wrapper 宽的话

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