应使用语义化的可合并节省运费，内联于或中；需含真实文案、可复制、无障碍友好，配合svg图标与aria-label，并确保状态实时同步。
怎么用 HTML 标出“可合并节省运费”提示
直接加 <span></span> 或 <small></small> 就行，别套 <div> 或滥用 <code><h3></h3> —— 这类提示是辅助信息，语义上属于内联说明，不是独立区块或标题。
- 优先用
<span class="order-merge-hint"></span>，配合 CSS 控制颜色、字号和间距 - 如果提示出现在订单列表项里，嵌在
<li>或<td> 内部更合理，避免破坏流式布局 <li>别用 <code>title属性单独塞提示文字，屏幕阅读器可能不读，且无样式控制权 - 真实文案必须写在 HTML 里，例如：
<span class="hint">可合并节省运费</span> - 若需动态控制显隐，用 JS 切换
class或aria-hidden，而不是删/加伪元素内容 - 部分老版本微信内置浏览器对伪元素内容的语音朗读支持不稳定，实测 fallback 失败率高于 30%
- 推荐写法：
<span class="hint"><svg aria-hidden="true">...</svg> 可合并节省运费</span>，再用aria-label="该订单可与其他待发货订单合并，预计节省运费 ¥3.5"补充细节 - 不要把图标和文字拆成两个
<span></span>后用 CSS 拼接，否则缩放或高对比度模式下易错位 - 如果后端不确定能否合并（比如库存变动中），宁可不显示提示，也不要显示灰色“✅ 可合并”却实际点不了
- CSS 示例：
.order-merge-hint { padding: 6px 12px; border-radius: 4px; } - 如果点击后要弹窗或跳转，务必加
role="button"和tabindex="0"，否则键盘用户无法聚焦 - 别用
:hover做唯一交互反馈，移动端没 hover；改用:active或 JS 加临时 class
为什么不能只靠 CSS 伪元素生成“可合并”文案
伪元素（如 ::before）生成的文本无法被复制、不进 DOM 树、对无障碍支持差 —— 用户想截图查运费规则，或者用读屏软件确认是否真能合并，这时候空有样式没内容就掉链子。
“订单合并”提示要带状态标识吗？比如打勾图标
要，但图标必须是 <svg></svg> 内联或 <img>，且配 aria-label。纯 Unicode 符号（如 ✅）在某些字体下渲染异常，iOS 旧系统甚至显示为方块。
移动端点击区域太小，怎么让“可合并”提示可点又不误触
给整个提示容器加 padding 扩展热区，而不是只给文字加 font-size —— 文字本身只有 12–14px 高，手指点不准。
