html - 聊天界面文本溢出 - CSS

Question

我到处搜索，但似乎几乎没有人考虑到这一点。我有一个聊天界面，它是一个 div 元素，里面有一个 ul，然后里面是包含 p 元素的 li。

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... 之外，一切看起来都很好而且有 Blob ，因为它使四舍五入的 p 溢出。不仅如此，最大宽度在某些情况下似乎也不起作用。

(为了演示，我只是将 display:table 添加到右框 p 元素。

提前致谢。

Answer 1

你只需要添加word-break: break-all;来改变换行

https://jsfiddle.net/nqp685h1/