Menu
I use the <abbr> tag to show the full content of some trimmed words with the CSS property text-overflow: ellipsis .
When using <abbr> these words get a dotted underline and on hover cursor changes to one with a question mark.
I did manage to change it using this. But, I'm not sure this is the best way, is there anything wrong with this approach?
abbr[title] { border-bottom: none !important; cursor: default !important; } 
909
By default, the <abbr> tag adds an underline to the text. This can be removed using the CSS property text-decoration . An <abbr> element without underline.
By setting the text-decoration to none to remove the underline from anchor tag. Syntax: text-decoration: none; Example 1: This example sets the text-decoration property to none.
The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
Starting with v40 Firefox switched to using text-decoration to provide the underline and chromium will be doing it that way too. So you should update your code to include that if you need to support those browsers:
abbr[title] { border-bottom: none !important; cursor: inherit !important; text-decoration: none !important; } It sets a border and text-decoration. Remove that with:
border: none; text-decoration: none; Example: jsfiddle
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
