由abbr标签引起的下划线如何去除？

Question

我使用<abbr>标签和CSS属性text-overflow: ellipsis来展示一些被截断的单词的完整内容。

使用<abbr>标签后，这些单词会有一个点状下划线，并在悬停时光标变成带有问号的样式。

我尝试过使用以下方法来更改它，但是我不确定这是否是最佳方式，这种方法有什么问题吗？

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

- Dhanushka Dolapihilla

---

你尝试过使用 text-decoration: none; 吗？ - laaposto

问题在于您错误地使用了<abbr>标签，它是用来表示缩写词的，而不是缩短的文本。这就好比您想要改变<h1>标签，因为您把它用在了脚注上一样。 - Adriano Repetti

我认为这更适合于代码审查。如果它太旧无法迁移，我认为应该将其关闭为离题。Stack Overflow是问题回答网站，而不是问题建议网站。 - David Archibald

Answer 1

自Firefox v40起，开始使用text-decoration来提供下划线，而Chromium也将采用这种方式。因此，如果您需要支持这些浏览器，应更新代码以包括这一变化:

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

- frederickf

---

如果abbr标签在a标签或其他情况下，光标不应该是默认值，那么cursor: inherit将是更好的选择。我将继续编辑您的答案。 - Chris Peters

重要性并非必需，如果您稍后需要添加自己的适当边框，则会对您造成麻烦。 - Julix

天啊，这让我白费了至少一个小时的脑子。它是 border-bottom 和 text-decoration 两个属性都要设置。 - yalestar

Answer 2

它设置了一个边框和 text-decoration。 使用以下方法去除它：

border: none;
text-decoration: none;

示例：jsfiddle

- Alex

---

似乎它不起作用（在这里是FF 40），你需要添加text-decoration: none才能使它起作用。 - Elaine Marley

Answer 3

这应该可以工作：

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

这里使用了缩写样式。

- Mert S. Kaplan

Answer 4

使用 abbr[title] {text-decoration: none !important;} 来移除它。

- Mubtasim Fuad

Answer 5

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

- raj thakkar

---

答案已经在下面提到了，你只需要重新写一遍即可。 - Bruce

@Joseph 仅包含代码的答案可能不是一个好答案，但它仍然是一个答案。我建议你阅读这篇关于LQPRQ的文章：You're doing it wrong: A plea for sanity in the Low Quality Posts queue。 - FelixSFD