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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Он устанавливает границу и text-decoration. Удалите это с помощью:

border: none;
text-decoration: none;

Пример: jsfiddle

Ответ 3

Это должно работать:

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

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

Ответ 4

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