直接用 margin-left: auto 和 margin-right: auto 控制左右对齐即可：用户消息加 class="mine" 并设 margin-left: auto，对方消息用 class="theirs" 保持左对齐或设 margin-right: auto；需同步设置 max-width: 80%、对应圆角及伪元素三角箭头，并确保 scrollIntoView 在 DOM 渲染后调用。
怎么让消息气泡自动靠左/靠右对齐
直接用
和
就够了，别碰
或
——前者会让时间戳错位，后者在响应式下容易导致气泡重叠、新消息不滚动。
用户消息加
，内部气泡设
；对方消息用
，气泡保持默认左对齐或显式写
。
必须同步控制宽度和圆角：
要去掉左上角圆角：
要去掉右上角圆角：
所有气泡必须设
，禁用
，否则窄屏下文字挤成一列，气泡反而变宽
怎么给气泡加三角箭头（小尾巴）
用伪元素 + 单边 border 最稳，不是贴图也不是 SVG。左气泡尾巴用
，右气泡用
。
立即学习
“
前端免费学习笔记（深入）
”；
关键参数要配对：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
左气泡：
+
右气泡：
+
两个伪元素需错开
：背景色箭头在下层，边框色箭头在上层，否则边缘发虚
注意：
和伪元素偏移值（比如
）必须同步缩放；用
或视口单位时，尾巴位置也要跟着调，否则高 DPI 屏幕下箭头会悬空。
为什么
总是不滚到最新消息
不是 API 有问题，是调用时机和容器配置错了。
三个硬性条件缺一不可：
必须等新消息 DOM 真实渲染完再调 —— Vue 里包一层
，React 用
监听
变化
滚动容器必须有固定高度 +
，不能靠父级撑开
别对整个列表调，要对最新一条消息元素调：
长文本、中英文混排怎么不断行或溢出
单独用不够，得组合控制：
英文优先按单词断：用
（新标准）或
（旧写法）
中文场景建议加
，避免超长 ID 或链接卡住布局
所有气泡必须设
，这是防止撑破布局的第一道防线
最容易被忽略的是：气泡的
和伪元素定位值（比如
）必须同步缩放；用
或视口单位时，尾巴偏移量也要跟着变，否则高 DPI 屏幕下箭头会悬空。
margin-left: automargin-right: autofloatposition: absoluteclass="mine"margin-left: autoclass="theirs"margin-right: auto.mine .bubbleborder-top-left-radius: 0.theirs .bubbleborder-top-right-radius: 0max-width: 80%width: 100%::before::afterborder-color: transparent #ff6a00 transparent transparentleft: -12pxborder-color: transparent transparent transparent #007affright: -12pxz-indexmax-width-12pxremscrollIntoViewthis.$nextTick()useEffectmessages.lengthoverflow-y: autonewMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' })white-space: normaloverflow-wrap: break-wordword-break: break-wordword-break: break-allmax-width: 80%max-width-12pxrem