聊天气泡换行时右侧留白过大，需实现iMessage式自动换行效果

问题描述 #

聊天气泡在文本换行成多行时，右侧会出现大量空白区域，需要实现类似iMessage/WhatsApp的效果：

• 气泡自适应短文本宽度
• 长文本使用最大宽度并整齐换行
• 多行文本保持左右内边距一致，右侧无额外空隙

已尝试inline-block、flex、white-space: pre-wrap、overflow-wrap: break-word，但仍存在间距不均问题。

当前代码 #

外层容器（Tailwind类） #

flex w-full mb-2
justify-end      /* 教练消息（右侧） */
justify-start    /* 客户消息（左侧） */

内层气泡（Tailwind类） #

/* 基础结构 */
inline-block w-fit
px-4 py-2 
rounded-2xl 
shadow
whitespace-pre-wrap break-words

/* 宽度限制 */
max-w-[75%] sm:max-w-[65%] lg:max-w-[55%]    /* 普通聊天 */
w-[300px] sm:w-[360px] md:w-[400px] lg:w-[480px]  /* 广播聊天 */

/* 颜色 */
bg-blue-500 text-white          /* 教练气泡 */
bg-[#FAFBFF] text-[#111827]     /* 客户气泡 */

HTML结构 #

<!-- 外层容器 -->
<div class="flex w-full mb-2 justify-end">
  <!-- 内层气泡 -->
  <div class="inline-block w-fit px-4 py-2 rounded-2xl shadow bg-blue-500 text-white">
    Message content here
  </div>
</div>

解决方案 #

问题核心是w-fit与宽度限制的冲突，以及换行属性的不合理使用，调整方案如下：

1. 修正自适应气泡核心类 #

移除w-fit，保留inline-block配合max-w限制，替换whitespace-pre-wrap为whitespace-normal（如需保留原文本换行可改用white-space: pre-line）：

/* 基础结构 */
inline-block
px-4 py-2 
rounded-2xl 
shadow
break-words whitespace-normal

/* 宽度限制 */
max-w-[75%] sm:max-w-[65%] lg:max-w-[55%]

/* 颜色 */
bg-blue-500 text-white          /* 教练气泡 */
bg-[#FAFBFF] text-[#111827]     /* 客户气泡 */

2. 广播聊天固定宽度处理 #

广播场景需单独设置固定宽度，避免与自适应类混用：

/* 广播聊天气泡 */
inline-block w-[300px] sm:w-[360px] md:w-[400px] lg:w-[480px]
px-4 py-2 
rounded-2xl 
shadow
break-words whitespace-normal

3. 关键逻辑说明 #

• inline-block让气泡自适应短文本宽度，长文本触发max-w限制后自动换行，撑满最大宽度无空白；
• whitespace-normal确保文本按容器宽度自动换行，避免pre-wrap可能导致的格式留白；
• 移除w-fit是因为文本换行后，该属性会错误计算容器宽度，导致右侧留白。

最终自适应场景HTML示例 #

<div class="flex w-full mb-2 justify-end">
  <div class="inline-block px-4 py-2 rounded-2xl shadow bg-blue-500 text-white max-w-[75%] sm:max-w-[65%] lg:max-w-[55%] break-words whitespace-normal">
    这是一段较长的测试文本，当内容超过最大宽度时会自动换行，换行后气泡右侧不会出现多余空白，和iMessage的表现一致。
  </div>
</div>

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