Удалить подчеркивание, вызванное тегом abbr

Question

Я использую <abbr> тег, чтобы показать полное содержание некоторых обрезанных слов с помощью свойства CSS text-overflow: ellipsis,

Когда используешь <abbr> эти слова получают пунктирное подчеркивание, а при наведении курсора оно заменяется словом с вопросительным знаком.

Мне удалось изменить это с помощью этого. Но я не уверен, что это лучший способ, есть ли что-то не так с этим подходом?

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

Answer 1

Начиная с v40, Firefox переключился на использование декорации текста, чтобы обеспечить подчеркивание, и хром будет делать то же самое. Поэтому вы должны обновить свой код, чтобы включить его, если вам нужно поддерживать эти браузеры:

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

Это использует сокращения стиля.

Answer 4

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

Answer 5

Удалите это с помощью abbr[title] {text-decoration: none !important;}