最稳的左右消息贴边方式是用 margin-left: auto 推右、margin-right: auto 推左；需包裹气泡容器、设 max-width: 80%、外置时间戳，并用伪元素单边 border-color 绘制不虚边尾巴，同时联动调整偏移值。
怎么用 margin-left/auto 和 margin-right/auto 实现左右消息贴边
靠 margin-left: auto 推右、margin-right: auto 推左，是目前最稳的布局方式。浮动（float）和绝对定位（position: absolute）会导致时间戳错位、新消息不滚动、响应式时气泡重叠——这些不是“偶尔出问题”，而是必然发生。
具体操作：
- 每条消息用一个
<div class="message"> 包裹，内部再嵌一层气泡容器（如 <code><div class="bubble">） <li>用户消息加 <code>class="mine"，气泡上写margin-left: auto+border-top-left-radius: 0 - 对方消息加
class="theirs"，气泡上写margin-right: auto+border-top-right-radius: 0 - 所有气泡必须设
max-width: 80%；禁用width: 100%，否则窄屏下文字会竖排挤成一列 - 左气泡尾巴用
.theirs .bubble::before，border-color: transparent #ff6a00 transparent transparent+left: -12px - 右气泡尾巴用
.mine .bubble::after，border-color: transparent transparent transparent #007aff+right: -12px - 两个伪元素必须错开
z-index：背景色箭头（如#ff6a00）在下层，边框色箭头（透明边框拼出的轮廓）在上层，否则边缘发虚 -
-12px这个偏移值不是固定常量——如果气泡用rem或vw缩放，尾巴位置也得同步变，否则高分屏下会“悬空” - 滚动容器（如
<div class="messages">）要有明确高度约束：<code>max-height: 60vh+overflow-y: auto；仅靠父级撑高会导致scrollHeight计算失准 - 调用必须等 DOM 真实渲染完：Vue 里包
this.$nextTick()，React 用useEffect监听messages.length变化，原生 JS 推荐requestAnimationFrame - 别对整个列表调，要对最新一条
<div class="message"> 元素调：<code>newMsgElement.scrollIntoView({ behavior: 'smooth', block: 'end' })；缺block: 'end'会默认居中，反而把新消息顶出视口长文本、中英文混排消息怎么不撑破气泡
white-space: normal单独用根本不够。超长 Base64、无空格 URL、中文 ID 会直接顶穿max-width，导致气泡变形甚至溢出容器。组合控制才有效：
- 中文为主场景，优先加
word-break: break-all（强制按字符断） - 英文单词需保持完整时，用
overflow-wrap: break-word（按单词边界断） - 所有气泡内文字统一加
box-sizing: border-box，避免 padding 影响宽度计算 - 时间戳必须外置在气泡容器之外，用
text-align: right或margin-left: auto对齐自身方向；塞进气泡里会导致换行错乱
最容易被忽略的是伪元素偏移值与气泡
max-width的联动关系——它们不是独立样式，而是一套视觉比例系统。改了气泡宽度，尾巴位置不跟着调，高 DPI 屏幕下第一眼就能看出不对劲。 - 中文为主场景，优先加
伪元素小尾巴怎么画才不虚边、不悬空
用 ::before 和 ::after 配单边 border-color 是唯一推荐方案。贴图、SVG 或多层 transform 都会在高 DPI 屏幕或缩放时出问题。
关键细节：
scrollIntoView 滚不到最新消息？先查这三件事
不是 API 坏了，是调用时机、容器配置、目标元素三者没对齐。常见现象：新消息来了页面不动、只滚一次就失效、Safari 下完全没反应。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须同时满足：
