直接用 margin-left: auto 和 margin-right: auto 控制左右对齐即可：用户消息加 class="mine" 并设 margin-left: auto，对方消息用 class="theirs" 保持左对齐或设 margin-right: auto；需同步设置 max-width: 80%、对应圆角及伪元素三角箭头，并确保 scrollintoview 在 dom 渲染后调用。
怎么让消息气泡自动靠左/靠右对齐
直接用 margin-left: auto 和 margin-right: auto 就够了，别碰 float 或 position: absolute——前者会让时间戳错位，后者在响应式下容易导致气泡重叠、新消息不滚动。
用户消息加 class="mine"，内部气泡设 margin-left: auto；对方消息用 class="theirs"，气泡保持默认左对齐或显式写 margin-right: auto。
必须同步控制宽度和圆角：
-
.mine .bubble要去掉左上角圆角：border-top-left-radius: 0 -
.theirs .bubble要去掉右上角圆角：border-top-right-radius: 0 - 所有气泡必须设
max-width: 80%，禁用width: 100%，否则窄屏下文字挤成一列，气泡反而变宽
怎么给气泡加三角箭头（小尾巴）
用伪元素 + 单边 border 最稳，不是贴图也不是 SVG。左气泡尾巴用 ::before，右气泡用 ::after。
关键参数要配对：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 左气泡：
border-color: transparent #ff6a00 transparent transparent+left: -12px - 右气泡：
border-color: transparent transparent transparent #007aff+right: -12px - 两个伪元素需错开
z-index：背景色箭头在下层，边框色箭头在上层，否则边缘发虚
注意：max-width 和伪元素偏移值（比如 -12px）必须同步缩放；用 rem 或视口单位时，尾巴位置也要跟着调，否则高 DPI 屏幕下箭头会悬空。
为什么 scrollIntoView 总是不滚到最新消息
不是 API 有问题，是调用时机和容器配置错了。
三个硬性条件缺一不可：
- 必须等新消息 DOM 真实渲染完再调 —— Vue 里包一层
this.$nextTick()，React 用useEffect监听messages.length变化 - 滚动容器必须有固定高度 +
overflow-y: auto，不能靠父级撑开 - 别对整个列表调，要对最新一条消息元素调：
newMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' })
长文本、中英文混排怎么不断行或溢出
white-space: normal 单独用不够，得组合控制：
- 英文优先按单词断：用
overflow-wrap: break-word（新标准）或word-break: break-word（旧写法） - 中文场景建议加
word-break: break-all，避免超长 ID 或链接卡住布局 - 所有气泡必须设
max-width: 80%，这是防止撑破布局的第一道防线
最容易被忽略的是：气泡的 max-width 和伪元素定位值（比如 -12px）必须同步缩放；用 rem 或视口单位时，尾巴偏移量也要跟着变，否则高 DPI 屏幕下箭头会悬空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
