应使用语义化的<span class="order-merge-hint">可合并节省运费</span>，内联于<li>或<td>中；需含真实文案、可复制、无障碍友好，配合SVG图标与aria-label，并确保状态实时同步。

怎么用 HTML 标出“可合并节省运费”提示

直接加 <span> 或 <small> 就行，别套 <div> 或滥用 <h3> —— 这类提示是辅助信息，语义上属于内联说明，不是独立区块或标题。

• 优先用 <span class="order-merge-hint">，配合 CSS 控制颜色、字号和间距
• 如果提示出现在订单列表项里，嵌在 <li> 或 <td> 内部更合理，避免破坏流式布局
• 别用 title 属性单独塞提示文字，屏幕阅读器可能不读，且无样式控制权

为什么不能只靠 CSS 伪元素生成“可合并”文案

伪元素（如 ::before）生成的文本无法被复制、不进 DOM 树、对无障碍支持差 —— 用户想截图查运费规则，或者用读屏软件确认是否真能合并，这时候空有样式没内容就掉链子。

• 真实文案必须写在 HTML 里，例如：<span class="hint">可合并节省运费</span>
• 若需动态控制显隐，用 JS 切换 class 或 aria-hidden，而不是删/加伪元素内容
• 部分老版本微信内置浏览器对伪元素内容的语音朗读支持不稳定，实测 fallback 失败率高于 30%

“订单合并”提示要带状态标识吗？比如打勾图标

要，但图标必须是 <svg> 内联或 <img>，且配 aria-label。纯 Unicode 符号（如 ✅）在某些字体下渲染异常，iOS 旧系统甚至显示为方块。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 推荐写法：<span class="hint"><svg aria-hidden="true">...</svg> 可合并节省运费</span>，再用 aria-label="该订单可与其他待发货订单合并，预计节省运费 ¥3.5" 补充细节
• 不要把图标和文字拆成两个 <span> 后用 CSS 拼接，否则缩放或高对比度模式下易错位
• 如果后端不确定能否合并（比如库存变动中），宁可不显示提示，也不要显示灰色“✅ 可合并”却实际点不了

移动端点击区域太小，怎么让“可合并”提示可点又不误触

给整个提示容器加 padding 扩展热区，而不是只给文字加 font-size —— 文字本身只有 12–14px 高，手指点不准。

立即学习“前端免费学习笔记（深入）”；

• CSS 示例：.order-merge-hint { padding: 6px 12px; border-radius: 4px; }
• 如果点击后要弹窗或跳转，务必加 role="button" 和 tabindex="0"，否则键盘用户无法聚焦
• 别用 :hover 做唯一交互反馈，移动端没 hover；改用 :active 或 JS 加临时 class

事情说清了就结束。最常被忽略的是：提示文案必须随订单状态实时同步，前端缓存了“可合并”状态但后端库存已售罄，这种不一致比样式丑更伤体验。