span是唯一专为修饰“文字中某几个字”设计的无语义行内容器，不换行、不占块级空间、不自带样式；若需设宽高或上下间距，须先改display为inline-block或inline-flex。
直接用 <span></span> 包裹目标文字，再配 CSS 类控制样式——这是唯一安全、语义干净、不影响布局的行内修饰方式。别试图用 <div> 或 <code><p></p> 去套单个词，也别靠内联 style 属性硬写，那样后期难维护、易出错。
为什么必须用 <span></span> 而不是其他标签
<span></span> 是 HTML 中唯一专为「文字中某几个字」设计的无语义内联容器。它不换行、不占块级空间、不自带样式，浏览器渲染时和裸文本完全一致——除非你主动加 CSS。
<div> 会强制换行、破坏行内流，塞进段落里会导致布局错位 <li> <code><strong></strong>或<em></em>带语义，纯为强调，不该只为变色或加下划线滥用-
<b></b>和<i></i>已退化为表现层标签，现代项目应避免 - 重复用
id绑定样式会违反唯一性原则，必须用class - 修复方式：把
{{'SaveTitle'| translate}}单独包一层<span class="underline-text"></span> - CSS 里只对
.underline-text设text-decoration: underline - 确保
.btn-save本身移除text-decoration，否则可能叠加生效 - 如果父级已有全局下划线规则，可用
.btn-save .underline-text { text-decoration: underline; }确保优先级 - 需要宽高或垂直间距？先改
display：用inline-block（推荐）或inline-flex -
display: inline-block保留行内位置，又能设padding、margin、max-width、vertical-align - 要居中对齐内部文字？
display: inline-flex+align-items: center更精准，但 IE11 不支持 - 绝对不要写
span { display: block; }—— 它会打断文本流，导致换行
text-decoration: underline 为什么不能直接加在父容器上
因为 text-decoration 作用于整个元素的文本内容，且具有继承性。哪怕你只希望“保存”二字有下划线，但父级 <div class="btn-save"> 一加 <code>text-decoration: underline，括号里的数字 {{row.box.length}} 也会被划上——这不是 bug，是规范行为。
给 <span></span> 加宽高/上下 margin 为啥没反应
因为 <span></span> 默认是 display: inline，行内元素天生无视 width、height、margin-top、margin-bottom。DevTools 里看到 computed 值是 auto 就对了。
最容易被忽略的是可访问性：仅靠颜色或下划线区分信息不够。比如红色错误提示，得补 aria-label 或图标；下划线链接需确保足够长（至少 2px 高度）、有足够对比度，否则屏幕阅读器用户和低视力用户可能无法识别。
