用内联样式实现错题相似度标签，设min-width:4ch防收缩，font-weight:bold突出数字，按90%–100%（绿/小圆角）、70%–89%（蓝/标准圆角）、0%–69%（灰/透明）分段配色，后端传小数需转整数，移动端加white-space:nowrap防截断。
怎么用 HTML 实现“85%相似”这种带百分比的错题相似度标签
直接用 套文字 + 内联样式最轻量，不需要框架、不依赖 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 更可靠。
后端传来的相似度是小数（如 0.85）还是整数（85）？HTML 里怎么安全处理
必须确认接口字段定义。传 0.85 是常见但危险的做法：前端一不留神写成 {score}%，结果渲染出 0.85%，用户以为只有不到 1%。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 如果后端返回小数，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%、小数输入、超长题干、折叠面板、深色模式所有场景下都不变形、不误读、不越界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
