用户消息靠右、对方消息靠左仅需两条css：.mine .bubble设margin-left: auto，.theirs .bubble保持左对齐或设margin-right: auto；均禁用width: 100%，并配max-width: 80%防撑爆。
直接用 margin-left: auto 和 margin-right: auto 控制气泡左右对齐，别碰 float 或 position: absolute——后者会让时间戳错位、新消息不滚动、高 DPI 屏幕下箭头悬空。
怎么让用户消息靠右、对方消息靠左
核心就两条 CSS 规则，不用 JS 判断方向：
- 用户消息容器加
class="mine"，内部气泡设margin-left: auto，再加max-width: 80%防撑爆 - 对方消息用
class="theirs"，气泡保持默认左对齐，或显式写margin-right: auto - 所有气泡必须禁用
width: 100%，否则窄屏下文字挤成一列，气泡反而变窄
怎么给气泡加三角箭头（小尾巴）
用伪元素 + 单边 border 最稳，不是贴图也不是 SVG：
- 左气泡尾巴用
::before，border-color: transparent #ff6a00 transparent transparent，配合left: -12px - 右气泡尾巴用
::after，border-color: transparent transparent transparent #007aff，配合right: -12px - 两个伪元素要错开
z-index：背景色箭头在下层，边框色箭头在上层，否则边缘发虚 - 如果用了
rem或vmin做响应式缩放，尾巴的-12px偏移量也得同步缩放，否则高 DPI 屏幕下会悬空
为什么 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%必须和换行规则同时生效，否则长链接仍会突破容器
最容易被忽略的是：气泡圆角差异化（.mine .bubble 去掉左上角，.theirs .bubble 去掉右上角）和伪元素定位值必须随视口单位同步缩放——这在 iPad Pro 或 Windows 高分屏上会立刻暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
