Question

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

＆＃xA;＆＃xA;

html：

＆＃xA ;＆＃xA;

＆＃xD;＆＃ xA;

＆＃xD;＆＃xA;

  .chatRight {＆＃xD;＆＃ XA; background-color：lightgrey;＆＃xD;＆＃xA; font-size：30px;＆＃xD;＆＃xA;填充：5px;＆＃xD;＆＃xA; border-radius：6px;＆＃xD;＆＃xA;最大宽度：50％;＆＃xD;＆＃xA;自动换行：break-word;＆＃xD;＆＃xA; text-align：right;＆＃xD;＆＃xA; margin-left：auto;＆＃xD;＆＃xA; display：table;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; .chatLeft {＆＃xD;＆＃xA; background-color：aqua;＆＃xD;＆＃xA; font-size：40px;＆＃xD;＆＃xA;填充：5px;＆＃xD;＆＃xA; border-radius：6px;＆＃xD;＆＃xA;最大宽度：60％;＆＃xD;＆＃xA;自动换行：break-word;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; .chatBoxRight {＆＃xD;＆＃xA; text-align：right;＆＃xD;＆＃xA;自动换行：break-word;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; .chatBoxLeft {＆＃xD;＆＃xA; text-align：left;＆＃xD;＆＃xA;自动换行：break-word;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; #chatList {＆＃xD;＆＃xA; width：calc（100％ -  80px）;＆＃xD;＆＃xA; list-style-type：none;＆＃xD;＆＃xA; max-width：calc（100％ -  80px）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA; #chatList li {＆＃xD;＆＃xA; margin-top：5px;＆＃xD;＆＃xA; margin-bottom：5px;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 < code>＆lt; div id =“chatContainer”＆gt;＆＃xD;＆＃xA; ＆lt; ul id =“chatList”＆gt;＆＃xD;＆＃xA; ＆lt; li class =“chatBoxLeft”＆gt;＆＃xD;＆＃xA; ＆lt; p class =“chatLeft”＆gt;你好！＆lt; / p＆gt;＆＃xD;＆＃xA; ＆LT; /立GT;＆＃的xD;＆＃XA; ＆lt; li class =“chatBoxRight”＆gt;＆＃xD;＆＃xA; ＆lt; p class =“chatRight”＆gt;美好的一天＆lt; / p＆gt;＆＃xD;＆＃xA; ＆LT; /立GT;＆＃的xD;＆＃XA; ＆lt; li class =“chatBoxLeft”＆gt;＆＃xD;＆＃xA; ＆lt; p class =“chatLeft”＆gt;你好。＆lt; / p＆gt;＆＃xD;＆＃xA; ＆LT; /立GT;＆＃的xD;＆＃XA; ＆lt; li class =“chatBoxRight”＆gt;＆＃xD;＆＃xA; ＆LT，P类= “chatRight” ＆GT; hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhaaaaaaaaaaaaaaa＆LT; / P＆GT;＆＃的xD;＆＃XA; ＆LT; /立GT;＆＃的xD;＆＃XA; ＆lt; li class =“chatBoxRight”＆gt;＆＃xD;＆＃xA; ＆LT，P类= “chatRight” ＆GT; aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa＆LT; / P＆GT;＆＃的xD;＆＃XA; ＆LT; /立GT;＆＃的xD;＆＃XA; ＆LT; / UL＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

＆＃xD;＆＃xA;

＆＃xA;＆＃xA;

现在问题是溢出，一切看起来都很好而且是blobby，除了aaa ......，因为它使圆形p溢出。这不仅仅是这个，但最大宽度似乎也不适用于案例。

＆＃xA;＆＃xA;

（为了演示我只是将display：table添加到了右边的p元素。

＆＃xA;＆＃xA;

提前致谢。

＆＃xA;

Answer 1

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

https://jsfiddle.net/nqp685h1/

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

聊天界面溢出的文本 - CSS

2 个答案: