Unity中实现消息背景随文本自动适配宽高的方法

核心思路 #

通过调整CSS布局属性，让消息容器宽度由文本内容决定，同时限制最大宽度避免过度拉伸，高度随文本行数自动撑开。

基础HTML结构 #

先搭好消息层级，区分发送方和接收方消息：

<div class="message-list">
  <!-- 接收方消息 -->
  <div class="message-row">
    <div class="message message-receive">嘿，最近在忙什么呢？</div>
  </div>
  <!-- 发送方消息 -->
  <div class="message-row">
    <div class="message message-send">我在开发一款信使App，已经搞定消息收发了，现在正在调消息气泡的样式</div>
  </div>
  <!-- 长文本测试 -->
  <div class="message-row">
    <div class="message message-receive">哈哈，那你可得把气泡样式做好，比如长文本的时候要自动换行，宽度别太宽，不然看着不舒服，就像我现在发的这条超长消息一样，得自动调整高度和宽度</div>
  </div>
</div>

关键CSS设置 #

直接上可复用的样式，核心作用标在注释里：

/* 模拟手机屏幕的消息列表容器 */
.message-list {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  background-color: #f0f0f0;
  padding: 10px;
}

/* 控制消息对齐方向的行容器 */
.message-row {
  margin: 8px 0;
  display: flex;
}

/* 发送方消息靠右对齐 */
.message-row:nth-child(even) {
  justify-content: flex-end;
}

/* 消息气泡核心样式 */
.message {
  display: inline-block; /* 关键：宽度由内容决定，不强制占满父容器 */
  max-width: 75%; /* 限制最大宽度，避免撑满屏幕影响阅读 */
  padding: 10px 14px; /* 内边距撑开气泡高度，同时让文本和气泡边缘有间距 */
  border-radius: 18px; /* 圆角还原信使App风格 */
  word-wrap: break-word; /* 长文本/长单词自动换行，防止溢出 */
  line-height: 1.4; /* 优化行高提升阅读体验 */
}

/* 接收方消息样式 */
.message-receive {
  background-color: #ffffff;
  color: #333333;
}

/* 发送方消息样式 */
.message-send {
  background-color: #007aff;
  color: #ffffff;
}

关键属性说明 #

• display: inline-block：让气泡宽度完全由内部文本内容决定，告别固定宽度
• max-width：设置最大宽度，防止长文本直接撑满屏幕，保证视觉舒适度
• word-wrap: break-word：处理超长单词或无空格的连续字符，强制换行避免气泡溢出
• padding：既增加文本与气泡边缘的间距，也让气泡高度随文本行数自动撑开，无需手动设置固定高度

额外优化点 #

• 如果用Flexbox布局，给.message设置flex: 0 1 auto也能达到同样的自适应宽度效果，适合更复杂的布局场景
• 移动端适配时，可根据屏幕尺寸调整max-width的百分比（比如80%），适配不同设备
• 给气泡加box-shadow: 0 1px 2px rgba(0,0,0,0.1)，能增加立体感，更贴近主流信使App的视觉效果

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