使聊天消息不重叠 CSS答案

【问题标题】：Make chat messages not overlap CSS使聊天消息不重叠 CSS
【发布时间】：2020-10-02 16:17:57
【问题描述】：

我正在测试一个聊天 UI，并且我已经在 codepen 中获得了代码：https://codepen.io/nikitricky/pen/yLOdmdw 但是聊天消息重叠。我尝试使用margin 和换行符，但它们都不起作用。我该如何解决这个问题？

【问题讨论】：

标签： html css overlap

【解决方案1】：

尼克 M 是正确的。也看看我的 CSS 编辑。我给每个聊天气泡一个.chat 类，并创建了一个声明块来容纳所有常见的样式规则。

.chat {
  padding: 10px;
  margin: 10px 0;
  font-size: 18px;
  width: 50%;
  border-radius: 5px;
  clear: both;
}

.chat-else {
  background-color: #f1f1f1;
}

.chat-you {
  background-color: #acfafa;
  text-align: right;
  float: right;
}

.sender {
  background: -webkit-linear-gradient(#005086, #318fb5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 16px;
}

<h2>Chat Messages</h2>

<div class="chat chat-else">
  <span class="sender">Josh</span>
  <p>Hello. How are you today?</p>
</div>

<div class="chat chat-you">
  <p>Hey! I'm fine. Thanks for asking!</p>
</div>

<div class="chat chat-else">
  <span class="sender">Josh</span>
  <p>Sweet! So, what do you wanna do today?</p>
</div>

<div class="chat chat-you">
  <p>Nah, I dunno. Play soccer.. or learn more coding perhaps? Nah, I dunno. Play soccer.. or learn more coding perhaps? Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
</div>

【讨论】：

感谢您的勾选，但请考虑将其提供给@NickM，我只是添加到他的解决方案中！

【解决方案2】：

添加“清除：两者；”到.chat-else

【讨论】：

谢谢！另外我还有一个问题：为什么当我让文本变长时，它会脱离 div
Chrome 上好像没有这个功能，你用的是什么浏览器？
是的（额外的文字使帖子更长）
我已经像一块文本一样粘贴而没有溢出，我不知道为什么它会溢出。