html - 在 HTML 省略号下划线

Question

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

Answer 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;
}