Underline an HTML ellipsis

问题

I am using text-overflow: ellipsis to clip text that is inside of a span that is inside of an anchor. The ellipsis character is not underlined when I hover which causes a small gap. Is there a way to fix this?

回答1:

Yes, you can do this - set text-decoration: none and instead of that use 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;
}

来源：https://stackoverflow.com/questions/12903766/underline-an-html-ellipsis