Question

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

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

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

仍然是黑客，但您知道...：）

为HTML省略号加下划线

2 个答案: