气泡宽度应使用width: max-content配合max-width和white-space: nowrap，而非fit-content；箭头用position: absolute + left: 50% + transform: translateX(-50%)居中；长文本换行用overflow-wrap: break-word而非word-break；移动端避免固定min-width，改用min-width: fit-content和max-width: 85vw。
气泡宽度怎么不写死？用 max-content 而不是 fit-content
固定宽度假设文字不多，一换长句就溢出或撑开空白。真正靠谱的是让容器宽度由内容决定，但又得有上限——max-content 正好满足：它取所有行内内容自然宽度的最大值，文字换行时不会被压缩，适合单行气泡；而 fit-content 在某些浏览器里会退化成 auto，导致宽度塌陷。
实际用法：width: max-content; 配合 max-width: 280px;（按设计规范设上限），再加 white-space: nowrap; 防止单词内断行。
三角箭头怎么对齐气泡底部中心？用 transform: translateX(-50%) + 绝对定位
常见错误是靠 left: 50% 然后用 margin-left: -6px 硬调，一旦气泡宽度变，箭头就偏。正确做法是把箭头元素设为 position: absolute;，left: 50% 定位到父容器中点，再用 transform: translateX(-50%) 自动居中自身宽度——这样无论气泡多宽，箭头始终在正下方中心。
注意：气泡容器必须设 position: relative;，否则 absolute 会相对于最近的定位祖先偏移。
文字太长时怎么优雅换行？word-break: break-word 不如 overflow-wrap: break-word
word-break: break-word 是旧写法，已被标准废弃，部分 Safari 版本不支持；overflow-wrap: break-word 才是现行标准，它只在必要时才在长单词中间断行（比如超长 URL），不影响正常英文空格断行。
搭配使用：white-space: normal;（覆盖前面的 nowrap）+ overflow-wrap: break-word; + line-height: 1.4; 避免行高塌陷。
别漏掉：padding 要预留足够空间，否则换行后文字贴边难读。
移动端适配要注意什么？避免 min-width 错用导致小屏撑开
很多人给气泡加 min-width: 120px; 想保基本可读性，结果在 iPhone SE 这类窄屏上，120px 宽度直接触发横向滚动条——这不是 bug，是 CSS 严格执行了你的指令。
更稳妥的做法：min-width: fit-content;（注意这里是 fit-content，不是 max-content），它会让最小宽度等于内容最小固有宽度（比如一个汉字宽），同时允许收缩；再配合 width: max-content; 和 max-width: 85vw;（留出左右边距），就能兼顾小屏和大屏。
立即学习“前端免费学习笔记（深入）”；
气泡看着简单，但文字长度、换行策略、箭头锚点、视口约束这四件事只要有一处没对齐，就会在某个机型或某段文案上露馅。尤其注意overflow-wrap 的拼写和 transform 居中的前提条件，这两处改错一个，整个气泡就“歪”了。 
