强调HTML省略号 [英] Underline an HTML ellipsis

问题描述

我正在使用文本溢出：ellipsis 来剪辑位于锚点内的跨度内的文本。当我悬停导致一个小差距时，省略号字符不加下划线。有没有办法解决这个问题？ 是的，你可以这样做 - 设置文本修饰：none 而不是使用 border-bottom - DEMO

$ b

  a { 
 display：block; 
 width：185px; 
 white-space：nowrap; 
 overflow：hidden; 
文本溢出：省略号; 
 text-decoration：none; 
 
 border-bottom：1px透明; 
} 
 
 a：hover {
 border-bottom：1px solid＃000; 
} 
  

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

这篇关于强调HTML省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！