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