如何让锚点下划线适配文本截断后的宽度？

针对你遇到的链接截断后下划线与省略号错位、将截断样式移到内部span后下划线消失的问题，给你两个可行的解决办法：

方法一：用border-bottom模拟下划线 #

直接用底部边框替换原生的text-decoration，边框会严格跟随a标签的宽度，完美适配截断效果：

a {
  /* 替换原生下划线为底部边框 */
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  width: 150px;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* 可选：调整边框与文本的间距，更贴近原生下划线效果 */
  padding-bottom: 2px;
}

HTML保持原有结构即可：

<ul>
  <li>
    <a href="#"><span class="link-text">Menu item</span></a>
  </li>
  <li>
    <a href="#"><span class="link-text">Very long menu item that needs to be truncated</span></a>
  </li>
  <li>
    <a href="#"><span class="link-text">Menu item</span></a>
  </li>
</ul>

方法二：给内部span设置截断和下划线 #

把截断逻辑放在span上，同时让span设置下划线，确保下划线跟随截断后的文本宽度：

a {
  width: 150px;
  display: inline-block;
  /* 关闭a标签的原生下划线 */
  text-decoration: none;
}
.link-text {
  /* 给span设置下划线 */
  text-decoration: underline;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

这种方式下，span作为块级元素占满a的宽度，截断后的下划线会和省略号完美对齐，同时保留链接的完整可点击范围。

问题原因说明 #

• 原生text-decoration: underline是基于文本的布局盒子绘制的，当文本被截断后，省略号由容器生成，不在文本的装饰线范围内，导致下划线超出省略号。
• 直接给span加截断但下划线消失，是因为span默认是inline元素，无法继承a的下划线且无法限制宽度，改成block元素后就能同时实现截断和下划线效果。

内容的提问来源于stack exchange，提问作者Meek