用户消息靠右用margin-left: auto，对方消息靠左保持默认或设margin-right: auto；圆角差异化处理，伪元素加三角箭头，scrollIntoView需在DOM渲染后调用并指定最新消息元素。
直接用 margin-left: auto 和 margin-right: auto 控制左右气泡，别碰 float 或 position: absolute —— 后者会让时间戳错位、新消息不滚动、响应式时气泡重叠。
怎么让用户消息靠右、对方消息靠左
核心就两条 CSS 规则：
- 用户消息容器加
class="mine"，内部气泡设margin-left: auto，再加max-width: 80%防撑爆 - 对方消息用
class="theirs"，气泡保持默认左对齐，或显式写margin-right: auto - 圆角必须差异化：
.mine .bubble去掉左上角（border-top-left-radius: 0），.theirs .bubble去掉右上角（border-top-right-radius: 0）
怎么给气泡加“小尾巴”（三角箭头）
用伪元素 + 单边框最稳，不是贴图也不是 SVG：
- 左气泡尾巴用
::before，border-color: transparent #ff6a00 transparent transparent，配合left: -12px - 右气泡尾巴用
::after，border-color: transparent transparent transparent #007aff，配合right: -12px - 两个伪元素要错开
z-index：背景色箭头在下层，边框色箭头在上层，否则边缘发虚
为什么 scrollIntoView 总是失效
不是 API 有问题，是调用时机和容器配置错了：
立即学习“前端免费学习笔记（深入）”；
- 必须等新消息 DOM 真实渲染完再调，Vue 里得包一层
this.$nextTick()；React 用useEffect监听messages.length变化 - 滚动容器必须有固定高度 +
overflow-y: auto，不能靠父级撑开 - 别对整个列表调，要对最新一条消息元素调：
newMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' })
长文本、中英文混排怎么自动换行
单靠 white-space: normal 不够，得组合控制：
-
word-break: break-word（旧写法）或overflow-wrap: break-word（新标准），优先按单词断 - 中文场景建议加
word-break: break-all，避免超长 ID 或链接卡住布局 - 所有气泡必须设
max-width: 80%，禁用width: 100%—— 否则窄屏下文字挤成一列，气泡宽度反常
最容易被忽略的是：气泡的 max-width 和伪元素定位值（比如 -12px）必须同步缩放；用 rem 或视口单位时，尾巴偏移量也要跟着变，否则高 DPI 屏幕下箭头会悬空。
