在 HTML 省略号下划线答案

【问题标题】：Underline an HTML ellipsis在 HTML 省略号下划线
【发布时间】：2012-10-05 21:46:54
【问题描述】：

我正在使用text-overflow: ellipsis 来剪辑位于锚点内的跨度内的文本。当我悬停时，省略号字符没有下划线，这会导致小间隙。有没有办法解决这个问题？

【问题讨论】：

【解决方案1】：

是的，您可以这样做 - 设置 text-decoration: none 而不是使用 border-bottom - DEMO

a {
    display: block;
    width: 185px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;

    border-bottom: 1px solid transparent;
}

a:hover {
    border-bottom: 1px solid #000;
}

【讨论】：

这种方式感觉像是一种 hack，但我想这可能是唯一的方法。我真的觉得省略号应该采用包含它的元素的text-decoration。
这里的省略号是一个伪元素（如 :before 或 :after ），因此它不算作文本。这就是**text**-decoration 没有被应用的原因。
感谢您的破解）

【解决方案2】：

如果有人像我一样发现了这个，并且不喜欢边框底线太远的事实，那么这段代码可能会有所帮助DEMO

a {
    display: block;
    width: 185px;
    background: beige;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #000;
    position: relative;
}

a:hover::before {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 0;
    left: 0;
    border-bottom: 1px solid black;
}

仍然是一个 hack，但你知道... :)

【讨论】：