水平包含div文本中的p文本

Question

我为一个网站做了一个朋友列表脚本，并在聊天部分注意到一些有趣的UI问题。当一个聊天消息，那是很长的被添加到具有属性overflow: scroll聊天内容DIV，它延伸出来水平，像这样：

我需要它，因此内容中的<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财产打破的话，如果它比包装

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

更宽