嘿，我来帮你搞定这个聊天气泡尺寸适配的问题！你现在的气泡是固定宽高，所以不管文本长短都保持一样大小，只要调整CSS就能让它自动跟着内容走，具体步骤如下：

核心CSS修改方案 #

你只需要修改.bubble类的样式，去掉固定宽高，加上几个关键属性就能实现适配：

.bubble {
  /* 移除固定的width和height，让尺寸随内容自动变化 */
  width: auto;
  height: auto;
  /* 设置最大宽度，避免长文本撑满整个屏幕，可根据需求调整百分比 */
  max-width: 70%;
  /* 内边距让文本和气泡边缘有合适的间距，提升美观度 */
  padding: 8px 12px;
  /* 自动换行，处理长单词或无空格的连续字符 */
  word-wrap: break-word;
  /* 让气泡仅包裹内容，而不是默认的块级元素占满整行 */
  display: inline-block;
  /* 以下是可选的样式，保持聊天气泡的外观（根据你的现有样式调整） */
  border-radius: 18px;
  background-color: #e5e5ea;
  margin: 6px 0;
}

关键属性解释 #

• width: auto & height: auto：让浏览器根据内容自动计算元素的宽高，替代原来的固定值。
• max-width: 70%：限制气泡的最大宽度，避免长文本导致气泡过宽影响布局，数值可以根据你的页面布局灵活调整。
• display: inline-block：让气泡元素从默认的块级元素（占满整行）变成仅包裹内容的行内块元素，这样气泡只会占文本需要的宽度。
• word-wrap: break-word：当遇到超长单词或无空格的连续字符时，自动换行，防止气泡横向溢出。

适配不同方向的气泡（可选） #

如果你的聊天区分“自己发送”和“对方发送”的气泡，还可以给不同的气泡类添加对齐样式，比如：

/* 自己发送的气泡，右对齐 */
.bubble.self {
  float: right;
  background-color: #0084ff;
  color: white;
}

/* 对方发送的气泡，左对齐 */
.bubble.other {
  float: left;
}

修改后，你原来的JS代码添加气泡时，只需要给对应的气泡加上.self或.other类，就能实现左右对齐的同时自动适配内容尺寸啦。

这样调整后，你的聊天气泡就会完美适配文本内容，短文本紧凑，长文本自动换行并限制最大宽度，完全符合聊天应用的需求～

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