What is the reason behind text underline being disabled when using "hidden: overflow" in CSS?

I have a long text string that I want to auto-shorten using CSS with text-overflow: ellipsis, but it's removing the underline from my link. Here is the code:

NORMAL

.link {
  font-weight: bold;
    cursor: pointer;
  color: black;
  text-decoration: underline;
    text-underline-position: under;
}

.link:hover {
  text-decoration: none;
}
<a class="link" href="#">AEEF8CDB5ADF2F28016F39E1FBFC237DAF98D402</a>

SHORTENED

.link {
  font-weight: bold;
  cursor: pointer;
  color: black;
  text-decoration: underline;
  text-underline-position: under;
  max-width: 100px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.link:hover {
  text-decoration: none;
}
<a class="link" href="#">AEEF8CDB5ADF2F28016F39E1FBFC237DAF98D402</a>

If anyone can help, I would appreciate it. Thank you!

css

Answer №1

In my opinion, the font looks better with added text underlining, since the height may exceed the line-height, leading to overflow. Text-overflow is able to conceal this issue. I recommend following @Bouh's advice: "Adding 1px bottom padding will resolve the issue."

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

javascriptjqueryhtmlcss

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

javascripthtmlcss

Struggling with aligning rows containing three divs each in Rails and bootstrap

Looking to display 3 article divs in each row on my website using bootstrap 3 grid system: <div class="container-fluid"> <h1>NEWS</h1> <div class="row"> <% @articles.each do |article| %> <div class="col- ...

htmlcssruby-on-railstwitter-bootstrap

Delay the occurrence of a hover effect until the previous effect has finished executing

As I hover over an element, the desired animation is displayed while hiding other elements on the page. The challenge I'm encountering is that if I quickly hover over many divs, the animations queue up and hide the divs sequentially. I want only one ...

javascriptjquerycssjquery-hover

Why is it possible to apply column width to a div element, but not to a button?

This code functions properly and sets the button to a size 4: <div class="col-xs-4"> <button class="btn btn-block btn-primary">Like</button> </div> However, the following code does not work as expected: <div> <bu ...

htmlcssbootstrap-4

"Responsive header design using Bootstrap for both desktop and mobile devices

Is there a way to create a header that adjusts its width based on the device viewing it, with maximum width for desktop and no padding for mobile? Here is an example of the code: <div class="row"> <div class="span12"> ...

csstwitter-bootstrap

Ways to recover HTML elements that have been eliminated by jQuery's remove

$(document).ready(function() { $('#remove').click(function() { $('.test').remove(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test-wra ...

javascripthtmlcss

What is the CSS selector used to target elements that are not contained within another selector?

There are numerous nested divs within my code: <div> <div> <div>Apple</div> <div> <div>Banana</div> <div>Grape</div> </div> </div> <div>Craisin</div&g ...

css

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

javascripthtmlcssbootstrap-4

Is there a way to spin the picture but keep the container still?

Is there a way to animate the rotation of the gradient color without rotating the rhombus? I attempted using transform: rotate, but it ended up rotating the entire shape. Any suggestions on how to achieve this effect? .box { position: absolute; top ...

htmlcsscss-animations

Utilize the full width available to create a flexible div element without any fixed sizes

I have come across similar questions, but none of them quite addressed my specific situation. My dilemma involves a tabbed navigation that can vary in size depending on the number of tabs added to it. Adjacent to the navigation, there is a second area hous ...

jquerycss

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

javascriptcssreactjsreact-data-grid

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

htmlcssreactjsnext.jstailwind-css

What is the best way to center text in a div with a distinct background color?

Could really use some assistance with this. Here are the images for reference: https://i.stack.imgur.com/JNZkT.jpg Currently getting this result: https://i.stack.imgur.com/nW17o.jpg <style> .Nav_bar_links div{ margin: 0% 1 ...

htmlcssweb-deployment

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

javascripthtmljquerycssbootstrap-4

Acquire the content of a nested element using jQuery

I have a navigation list with separate headlines and text for each item. The goal is to switch the main headline and paragraph of text when hovering over a navigation item. CodePen Example Currently, my code displays all text. I only want to display the ...

javascriptjquerycss

Is it possible to maintain the width of an element even when its height is set to 0px?

Let me provide a detailed explanation of my issue below, but the question remains the same: Is there a way to make an element hidden or invisible with a height of 0px or slightly more than 0px while maintaining its width for functionality in Safari? Here ...

htmlcsssafariheight

Finding and Selecting Dynamic CSS Elements with CSS Selector Techniques

Utilizing a tool called Stonly for adding tooltips, the CSS Selector is used to locate the HTML element for identifying the tooltip. Depending on the user input, a dynamic task list is generated. The challenge arises when trying to pinpoint a specific task ...

htmlcsselement

Styling Drawn Elements on a Canvas Using CSS

Can CSS Animations be applied to a circle drawn on a canvas using JavaScript? Specifically, I am using an AngularJS directive for this purpose: https://github.com/angular-directives/angular-round-progress-directive/blob/master/angular-round-progress-direct ...

cssangularjscanvasangularjs-directivecss-animations

After saving a rich field in Microsoft Sharepoint, I noticed that a new "External Class" was automatically added to my CSS

Although I am new to Sharepoint, I have experience in HTML and CSS. I recently created a mini HTML application that changes the pictures of hyperlinks on hover. It works perfectly when run on a normal browser outside of Sharepoint. However, the issue aris ...

htmlcssclasssharepointexternal