0
我到处搜索，但几乎没有人似乎将此考虑在内。我有一个聊天界面，它是一个div元素，在它里面有一个ul，然后里面是包含p元素的li。聊天界面溢出的文本 - CSS
HTML：
.chatRight {
background-color: lightgrey;
font-size: 30px;
padding: 5px;
border-radius: 6px;
max-width: 50%;
word-wrap: break-word;
text-align: right;
margin-left: auto;
display: table;
}
.chatLeft {
background-color: aqua;
font-size: 40px;
padding: 5px;
border-radius: 6px;
max-width: 60%;
word-wrap: break-word;
}
.chatBoxRight {
text-align: right;
word-wrap: break-word;
}
.chatBoxLeft {
text-align: left;
word-wrap: break-word;
}
#chatList {
width: calc(100% - 80px);
list-style-type: none;
max-width: calc(100% - 80px);
}
#chatList li {
margin-top: 5px;
margin-bottom: 5px;
}<div id="chatContainer">
<ul id="chatList">
<li class="chatBoxLeft">
<p class="chatLeft">Hello there!</p>
</li>
<li class="chatBoxRight">
<p class="chatRight">Good day</p>
</li>
<li class="chatBoxLeft">
<p class="chatLeft">How do you do?</p>
</li>
<li class="chatBoxRight">
<p class="chatRight">hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhaaaaaaaaaaaaaaa</p>
</li>
<li class="chatBoxRight">
<p class="chatRight">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</li>
</ul>
</div>现在的问题是四溢，一切似乎都不错，滴状，除AAA级...，因为它使圆角p溢出。这不仅仅是这一点，但最大宽度似乎也没有在案件中起作用。
（出于演示的缘故，我刚刚添加的显示：右表箱p元素
在此先感谢
这正是我需要的，谢谢！ – Leo3942