求助：实现WhatsApp式聊天气泡样式及时间文本同排布局

一、同一用户连续消息的箭头控制逻辑 #

核心思路是标记每个消息是否为当前用户连续发送的第一条消息，通过对比当前消息与上一条消息的发送者ID判断：

• 遍历消息列表时，给每个消息添加isFirstInSequence状态
• 渲染气泡时，根据该状态决定是否显示箭头

示例代码（React） #

// 预处理消息列表，标记连续消息的第一条
const processMessages = (messages) => {
  return messages.map((msg, index) => {
    const prevMsg = index > 0 ? messages[index - 1] : null;
    const isFirstInSequence = !prevMsg || prevMsg.senderId !== msg.senderId;
    return { ...msg, isFirstInSequence };
  });
};

// 渲染聊天气泡
const MessageBubble = ({ msg, currentUserId }) => {
  const bubbleClass = `bubble ${msg.senderId === currentUserId ? 'sent' : 'received'} ${msg.isFirstInSequence ? 'with-arrow' : ''}`;
  return (
    <div className={bubbleClass}>
      <p>{msg.content}</p>
      <span className="time">{msg.time}</span>
    </div>
  );
};

CSS关键样式 #

.bubble {
  position: relative;
  padding: 8px 12px;
  border-radius: 18px;
  margin: 4px 0;
  max-width: 70%;
}
.sent {
  background: #0084ff;
  color: #fff;
  margin-left: auto;
}
.received {
  background: #e5e5ea;
  color: #000;
  margin-right: auto;
}
/* 仅为连续第一条消息添加箭头 */
.bubble.with-arrow.sent::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #0084ff;
}
.bubble.with-arrow.received::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #e5e5ea;
}

二、文本与时间的自适应同排布局 #

采用Flexbox+自动换行方案，让文本占据气泡剩余空间自动换行，时间始终固定在气泡右下角：

气泡内部布局CSS #

.bubble {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
}
.bubble p {
  flex: 1;
  margin: 0;
  word-wrap: break-word;
}
.bubble .time {
  font-size: 0.8em;
  opacity: 0.8;
  white-space: nowrap;
}

核心逻辑：

• flex-wrap: wrap允许内部元素换行
• 文本段落设置flex: 1占据剩余空间，自动换行
• 时间元素white-space: nowrap避免换行，align-items: flex-end确保时间始终与文本底部对齐

内容的提问来源于stack exchange，提问作者Developer SA