Question

我使用<abbr>标记来显示CSS属性text-overflow: ellipsis的一些修剪单词的完整内容。

使用<abbr>时，这些单词会出现虚线下划线，并且悬停光标会更改为带有问号的单词。

我确实设法使用它来改变它。但是，我不确定这是最好的方法，这种方法有什么问题吗？

abbr[title] {
  border-bottom: none !important;
  cursor: default !important;
}

Answer 1

从v40 Firefox switched开始，使用text-decoration提供下划线和chrome doing it that way too。因此，如果您需要支持这些浏览器，则应更新代码以包含该代码：

abbr[title] {
  border-bottom: none !important;
  cursor: inherit !important;
  text-decoration: none !important;
}

Answer 2

设置边框text-decoration。删除它：

border: none;
text-decoration: none;

示例：jsfiddle

Answer 3

这应该有效：

abbr[title] {
  text-decoration: none;
}

这使用styling abbreviations.

Answer 4

abbr[title] {cursor: default !important;}

Answer 5

使用 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">hello</h1> <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, harum?</h3> <button>Submit</button> </div> </div> </body> </html>

删除它

删除由abbr标记引起的下划线

5 个答案: