用内联样式实现错题相似度标签，设min-width:4ch防收缩，font-weight:bold突出数字，按90%–100%（绿/小圆角）、70%–89%（蓝/标准圆角）、0%–69%（灰/透明）分段配色，后端传小数需转整数，移动端加white-space:nowrap防截断。
怎么用 HTML 实现“85%相似”这种带百分比的错题相似度标签
直接用 <span></span> 套文字 + 内联样式最轻量，不需要框架、不依赖 JS。关键不是“怎么显示”，而是“怎么让这个数字看起来可信又不突兀”。
常见错误是把 85% 写死在 HTML 里，结果后端返回 0% 或 100% 时样式崩掉（比如背景色溢出、文字被裁）。
- 用
min-width给容器兜底，避免0%太窄导致对齐错乱 - 百分比数字统一用
font-weight: bold，和普通文本区分开 - 别用
px固定宽度，改用em或ch（比如min-width: 4ch能稳住 0–100% 所有情况）
<span style="background:#e6f7ff; color:#1890ff; padding:2px 8px; border-radius:4px; font-size:12px; min-width:4ch; display:inline-block; text-align:center;"><strong>85%</strong></span>
CSS 怎么控制“相似度高”“中等”“低”的颜色和形状变化
相似度不是线性感知的——用户看到 92% 和 88% 几乎没差别，但 65% 就开始怀疑是不是真相似了。所以不能只靠数值变色，得设阈值分段。
-
90%–100%：绿色系，圆角更小（border-radius:2px），强调“高度一致” -
70%–89%：蓝色系，标准圆角（border-radius:4px），中性提示 -
0%–69%：灰色或浅橙，加opacity: 0.7，降低视觉权重，避免误导
别用 hsl() 动态算色——浏览器兼容性差，且人眼对 HSL 的“相似感”不敏感；老老实实用三组明确的 background-color 更可靠。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
后端传来的相似度是小数（如 0.85）还是整数（85）？HTML 里怎么安全处理
必须确认接口字段定义。传 0.85 是常见但危险的做法：前端一不留神写成 <strong>{score}</strong>%，结果渲染出 0.85%，用户以为只有不到 1%。
- 如果后端返回小数，JS 层必须先
Math.round(score * 100)，再拼百分号 - 如果后端返回整数，HTML 模板里直接插值，但要加校验：
score = Math.max(0, Math.min(100, score)) - 永远不要信任未清洗的数据——哪怕文档写着“范围 0–100”，也见过返回
105或null的真实 case
移动端上“85%相似”标签被截断或换行怎么办
问题不在字体大小，而在默认的 white-space 行为。iOS Safari 对 inline 元素的换行特别激进，尤其在窄屏下。
- 强制不换行：
white-space: nowrap - 配合
overflow: hidden+text-overflow: ellipsis（仅当容器宽度受限时启用） - 更稳妥的是用
display: inline-flex替代inline-block，flex 容器天然抗挤压
别为了省几像素把 padding 设成 1px——Retina 屏下会糊，2px 是实际可用的下限。
真正难的不是写出“85%相似”这四个字，而是确保它在 0%、100%、小数输入、超长题干、折叠面板、深色模式所有场景下都不变形、不误读、不越界。
