html - 在 HTML 省略号下划线

Question

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

Answer 1

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

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

Answer 2

如果有人像我一样发现了这一点，并且不喜欢边框底线太远的事实，则此代码可能有助于演示

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

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