ReactJs开发聊天应用时如何为文本消息添加自适应内容的边框

问题原因 #

你当前的样式给.messages设置了固定的height:30px和width:100px，直接限制了容器大小，自然无法跟随文本内容自适应调整。

修正方案 #

直接替换原有样式即可实现自适应气泡效果，匹配Telegram/WhatsApp的展示逻辑：

.messages {
  /* 移除固定宽高，用内边距控制内部间距 */
  padding: 8px 12px;
  border: 2px solid rgb(134, 133, 133);
  border-radius: 18px; /* 圆角是IM气泡的核心特征，数值可自行调整 */
  margin: 10px 0 0 10px;
  background: white;
  max-width: 70%; /* 限制最大宽度，避免长文本撑满整个屏幕 */
  width: fit-content; /* 核心属性：容器宽度跟随内容自动收缩 */
  word-wrap: break-word; /* 长文本/长链接自动换行，不会撑破容器 */
  line-height: 1.4; /* 优化多行文本的可读性 */
}

/* 可选：区分自己发送和收到的消息样式，调整对齐方式和配色 */
.message-received {
  margin-left: 10px;
  margin-right: auto;
  background: white;
}
.message-sent {
  margin-left: auto;
  margin-right: 10px;
  background: #dcf8c6; /* WhatsApp发送消息的默认绿色背景，可自行替换 */
  border-color: transparent;
}

React侧使用示例 #

渲染消息列表时根据消息的发送方标识动态绑定类名即可：

// 假设你的消息列表结构为 [{id: 1, content: 'xxx', isSelf: false}, ...]
function MessageList({ messages }) {
  return (
    <div className="message-container">
      {messages.map(msg => (
        <div 
          key={msg.id}
          className={`messages ${msg.isSelf ? 'message-sent' : 'message-received'}`}
        >
          {msg.content}
        </div>
      ))}
    </div>
  )
}

兼容性说明 #

如果需要适配低版本浏览器，可把width: fit-content替换为display: inline-block，同时给消息容器的父级设置width: 100%，也能实现类似的自适应效果。

内容的提问来源于stack exchange，提问作者Yassine Mrabet