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