最简方案是 width: fit-content 并加 -webkit-fit-content 前缀兼容旧 safari，更稳用 display: inline-block；max-width 必须设在内部文字容器上，左右气泡需用 class 区分圆角与箭头方向，聊天容器应使用 flex: 1 + min-height: 0 避免键盘顶出，文字需 word-break: break-word 和 hyphens: auto 控制换行。
气泡宽度不固定，但要防撑破容器
直接设 width: fit-content 最简，但 Safari 旧版本（包括 iOS 16.4 之前）需要加 -webkit-fit-content 前缀。更稳的做法是用 display: inline-block —— 它天然收缩包裹内容，兼容性覆盖到 iOS 9+，且不会受父容器 text-align 干扰。
关键点：max-width 必须作用在气泡内部文字容器上（比如 .msg-bubble > p），而不是气泡外层 div。否则 align-self 或 text-align 对齐基准会按缩窄后的宽度算，导致左右气泡错位。
左/右气泡圆角与箭头方向必须匹配
微信风格不是靠 JS 判断左右，而是靠 class 区分：.msg-bubble--left 和 .msg-bubble--right。左气泡的右上、右下圆角大（如 border-top-right-radius: 16px），左上、左下小（如 border-top-left-radius: 8px）；右气泡反过来。箭头用伪元素 ::after + 边框三角实现，位置必须和圆角方向一致——左气泡箭头在左，右气泡箭头在右，否则视觉割裂。
常见错误：
- 给整个气泡设
border-radius，再单独覆盖某角，容易漏掉overflow: hidden导致箭头溢出 - 箭头用绝对定位但没配
transform: translateX(-50%)，在不同字体大小下偏移不准
移动端键盘弹出时气泡不能被顶出视口
这不是气泡本身的问题，而是整个聊天容器的布局响应。不要用 100vh 固定聊天区高度——键盘弹出会触发 viewport 缩小，100vh 变成“可见区域高”，导致底部气泡被截断。稳妥方案是让聊天容器用 flex: 1 在 flex 布局中撑开，同时设 min-height: 0 防止 overflow 失效。
另外，iOS 上 position: fixed 底部输入框 + 滚动聊天区时，气泡滚动可能卡顿。建议改用 position: absolute + bottom: 0，并确保父容器是 position: relative 且有明确高度。
短文本留白多、长文本换行错乱
这是 fit-content 或 inline-block 的副作用：它们让气泡紧贴文字，但没控制内边距与换行逻辑。解决方法是统一用 padding 控制呼吸感，并强制文字块使用 word-break: break-word 和 hyphens: auto（iOS Safari 支持）。
特别注意中文场景下的换行：
- 避免只写
white-space: normal，它对连续中文无换行约束 -
max-width: 80%是经验值，但需配合box-sizing: border-box，否则 padding 会让实际宽度超限 - 如果气泡里嵌了链接或表情，记得重置
a和img的vertical-align，否则基线错位拉高气泡
最易被忽略的是：气泡宽度自适应后，左右气泡的对齐锚点（align-self 或 margin-left/right）必须基于内容宽度计算，而不是容器宽度。一旦用了 fit-content，就别在同级再用 justify-content: flex-end 混用，容易在小屏上出现 1px 错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
