vs code中无法直接编辑器内渲染下划线，仅支持通过标签或style="text-decoration: underline"在markdown预览中显示，原生不支持==text==等非标准语法。
富文本编辑器里加下划线，不能靠 <u></u> 标签硬塞，也不能只写 text-decoration: underline 了事——它会吃掉 descender（g/y/p 的下延部分），颜色继承混乱，跨行还断线。真要稳定、可维护、无障碍友好的下划线，得按场景拆解。
富文本输出时下划线被过滤或失效
多数富文本编辑器（如 TinyMCE、Quill、CKEditor）默认禁用 <u></u>，或把 text-decoration 当内联样式剥离。原因很直接：语义污染 + 安全策略。
- 别手动拼
<span style="text-decoration: underline"></span>—— 大部分编辑器的 sanitizer 会干掉带冒号的 style 值 - 检查编辑器配置项，比如 TinyMCE 的
valid_styles或 CKEditor 的config.allowedContent，显式放开text-decoration和子属性 - 更稳妥的是注册自定义命令：用
editor.execCommand('underline')触发原生 underline 功能，它会生成语义中立的<span class="mce-underline"></span>或带 data 属性的 wrapper - 如果后端还要清洗 HTML，确保白名单包含
text-decoration-line、text-underline-offset等现代 CSS 属性名（注意：它们是连字符分隔的字符串，不是驼峰）
前端渲染富文本时下划线位置压字或断开
用户从编辑器粘贴或保存的 HTML，渲染出来下划线紧贴 baseline，g/y/p 被盖住；多行段落里下划线在换行处消失——这是 text-decoration 的默认行为，不是 bug。
- 必须显式设置
text-underline-offset: 4px（至少 3–5px），避开 descender；旧 Safari 不支持，得降级用border-bottom+transform: translateY(2px) -
text-decoration-thickness: 2px替代auto，避免字体变化时粗细突变 - 块级容器（如
<p></p>）内多行文本，text-decoration会自然跨行连续；但若用了display: inline-block包裹文字，就会断——别这么干 - 真遇到老邮件客户端或 Outlook，
border-bottom是唯一选择，但要配padding-bottom: 2px补偿视觉下沉，且禁止用margin-bottom，否则推挤下一行
富文本里局部下划线（比如只划“导出”不划“(PDF)”）
编辑器通常把整段内容当一个节点处理，text-decoration 是盒级继承，没法自动切词。强行给父容器加样式，括号和 PDF 全被划上。
- 编辑器输出必须是结构化 HTML，比如：
<span class="underline-trigger">导出</span> (PDF)，再单独给.underline-trigger加样式 - 别用
<u></u>或<ins></ins>包局部文本——屏幕阅读器会读成“插入内容”，破坏可访问性 - 如果编辑器不支持精细选区加样式（如 Quill 默认只支持整行），得改用自定义 blot 或监听 selectionchange 手动注入 span
- React/Vue 场景下，服务端返回的 HTML 若含
data-underline="true"，前端可用dangerouslySetInnerHTML+ 后处理脚本补上 class 和 CSS
真正难的不是怎么加下划线，而是判断此刻该用 text-decoration 还是 border-bottom，要不要降级，以及是否允许 transform 微调——这三者得同时看：目标浏览器、是否跨行、是否进邮件模板、有没有无障碍要求。漏掉任意一个，线上就可能糊成一片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
