关键用margin-left:auto（自己消息）和margin-right:auto（对方消息）控制气泡左右对齐，配合text-align:right/left控制内部文字对齐；禁用float和absolute定位，主气泡设非对称border-radius，伪元素::after绘三角箭头并用transform精确定位。
气泡对话的左右对齐怎么用CSS控制
关键不是靠 float 或绝对定位，而是用 margin-left / margin-right 配合 text-align 控制文字和气泡边界。微信风格的核心是：自己发的消息靠右，对方消息靠左，且气泡宽度自适应内容但有最大限制。
推荐做法是给每条消息加一个包裹容器（比如 <div class="message">），再用类名区分方向：
<ul>
<li>
<code>message--self：设 margin-left: auto + text-align: right
message--other：设 margin-right: auto + text-align: left
别用 float —— 它会让后续元素布局错乱；也别用 position: absolute —— 会脱离文档流，导致列表高度塌陷。
气泡形状和圆角怎么写才像微信
微信气泡不是纯圆角矩形，而是「单侧尖角」效果，本质是用 border-radius + 伪元素 ::after 模拟三角形箭头。重点在三个地方：
立即学习“前端免费学习笔记（深入）”；
- 主气泡本身用
border-radius: 18px 18px 18px 4px（右发消息）或4px 18px 18px 18px（左发消息），让靠近发送方一侧保留直角，方便接箭头 - 箭头用
::after绘制：设width: 0; height: 0; border: 6px solid transparent;，再把对应方向的边设成背景色 - 箭头位置必须用
transform: translateX()微调，不能只靠left/right—— 否则在不同字体大小下偏移量会错位
示例（右发消息箭头）：
.message--self::after {
content: '';
position: absolute;
top: 12px;
right: -12px;
width: 0;
height: 0;
border: 6px solid transparent;
border-left-color: #007AFF;
transform: translateY(-50%);
}
消息时间戳怎么贴在气泡下方又不撑开间距
时间戳不是气泡的一部分，但视觉上要“紧贴”气泡底部。常见错误是直接放 <div> 在气泡外，结果行高、margin 全乱了。
<ul>
<li>正确做法：把时间戳作为气泡容器的子元素，用 <code>margin-top: 4px + font-size: 12px + color: #999
display: inline-block 或 display: block 并控制 width: fit-content，否则会独占一行并拉宽整行align-self: flex-end，不然它会默认顶对齐注意：时间戳不要用 position: absolute 脱离布局 —— 这会导致滚动时定位漂移，尤其在 iOS Safari 上更明显。
长消息换行和英文单词断行怎么处理
用户发一长串无空格中文没问题，但遇到 URL、邮箱或连续英文（如 verylongwordwithoutspaces）会直接撑破气泡甚至溢出屏幕。
- 必须给气泡内容区（比如
<div class="message__content">）加 <code>word-break: break-word（兼容老版 Safari）和overflow-wrap: break-word（标准属性） - 对纯数字或字母串，额外加
hyphens: auto（仅 Safari/Chrome 支持）或word-break: break-all（激进，慎用） - 避免用
white-space: pre-wrap—— 它会保留所有换行符和空格，导致用户粘贴带缩进的代码时格式错乱
真正容易被忽略的是：iOS 微信内置浏览器对 overflow-wrap 的支持不稳定，所以 word-break: break-word 是必加项，不能只写一个。
