聊天界面溢出文本- CSS

Question

我找遍了所有地方，但几乎没有人考虑到这一点。我有一个聊天界面，它是一个div元素，里面有一个ul，然后里面是li，它包含p个元素。

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溢出。不仅仅是这样，最大宽度似乎也不适用于这种情况。

(出于演示的目的，我只是将display:table添加到右侧框的p个元素中。

提前谢谢。

Answer 1

您只需添加word-break: break-all;即可更改何时换行

https://jsfiddle.net/nqp685h1/

Answer 2

从.chatRight中删除display: table;，或者使用word-break: break-all;代替word-wrap: break-word;

​

.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;
}
.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>

​