论文摘要须包含研究背景与目的、方法、结果及结论四要素,语言简洁客观,结构清晰完整,突出创新点与实用价值。

别用 <u></u> 标签加下划线,它不是样式工具,是语义标记;真正可控、可维护的下划线必须靠 CSS,且不能只写 text-decoration: underline。
text-decoration 为什么不能只写 underline
单独写 text-decoration: underline 会重置所有子属性为浏览器默认值:颜色继承文字色、粗细是极细的 auto、位置紧贴 baseline——结果就是下划线压住 g、y、p 的 descender,看着糊成一团。更糟的是,它没法单独改颜色,换深色主题时下划线跟着变黑,和文字混在一起看不见。
你应该用完整声明或分写子属性:
-
text-decoration-line: underline(启用下划线) -
text-decoration-color: #007bff(显式指定颜色) -
text-decoration-thickness: 2px(避开auto的不可控) -
text-underline-offset: 4px(留出空间,避开降部)
旧 Safari 和邮件客户端里下划线断掉怎么办
老版 Safari(≤15.3)、Outlook 等不支持 text-underline-offset,text-decoration-thickness 也常失效。这时 border-bottom 是唯一能稳住的降级方案,但它不是“下划线”,是“底线”——行为完全不同。
踩坑点:
- 它算进行高(
line-height),可能把段落撑开,得手动减padding-bottom补偿 - 默认对齐到盒子底边,不是文字 baseline,要用
transform: translateY(2px)微调 - 遇到换行,
border-bottom在行尾就断了,而text-decoration会自动跨行连续 - 千万别用
margin-bottom模拟间距——它会推开下一行,破坏排版流
怎么让下划线只作用于局部文本
如果父元素是 <div class="btn">导出 (PDF)</div>,你只想给“导出”加下划线,.btn { text-decoration: underline } 会把括号和 PDF 全划上——因为 text-decoration 作用于整个盒子里的文本流,不是按词切分的。
正确做法是拆开 DOM:
<div class="btn"> <span class="underline-trigger">导出</span> (PDF)</div>
然后只给 span 加样式:
.underline-trigger { text-decoration: underline; text-underline-offset: 3px; }- 避免用
<u></u>或<ins></ins>——它们带语义,屏幕阅读器会读成“拼写错误”或“插入内容”,干扰可访问性 - 也不要用
display: inline-block+border-bottom包裹文字——它会破坏内联流,导致换行错位
复杂点其实在适配权衡
你得同时判断三件事:是否需要跨行连续、是否必须兼容旧 Safari、是否允许用 transform 微调。选错了,轻则下划线盖字,重则整段行高崩掉、换行断裂、可访问性报错。没有银弹方案,只有根据场景做取舍。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











