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

The resize function fails to trigger when it is required

Struggling to get this code working properly. If the window width is greater than 800, I want 6 images with a red background. If the window width is less than 800, I want 4 images with a blue background. I need this functionality to work both on r ...

javascriptjquerycss

Disappearance of the second level in a CSS dropdown menu

I am currently working on creating a dropdown menu using only CSS. Check out this example I'm using: http://jsfiddle.net/DEK8q/8/ My next step is to center the menu, so I added position-relative like this: #nav-container { position: rela ...

htmlcssdrop-down-menu

Mobile devices offer a seamless vertical scrolling experience

Here is the HTML structure I am working with: <div> <a>..</a> <i>..</i> <a>..</a> <i>..</i> <a>..</a> <i>..</i> </div> On larger screens, all elements are dis ...

htmlcsssass

Chrome isn't showing the Background Image

I am currently working on coding a basic HTML/CSS page and I want to include a background-image within a div element that links to a URL. Interestingly, my code is functioning properly in Safari (Mac) and Firefox but unfortunately not showing the desired r ...

htmlcssgoogle-chrome

Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties. <h5> <span className="viewcount" ref={boxSize}> ...

javascriptcssreactjs

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

htmlcssz-index

How to Target HTML Tags Locally using CSS Modules in Next.js?

I am looking to implement smooth scrolling specifically on one page in my Next.js application, such as my blog. Instead of applying it to the entire site through the globals.css file, I need a way to inject scroll-behavior: smooth; into the html tag only f ...

javascriptcssnext.jscss-modulesreact-css-modules

Troubleshooting issue with JQuery AJAX loading Bootstrap Dropdowns

I have a website on GitHub Pages that uses Bootstrap, but I'm having issues with the drop-down menu in the navbar. Sometimes it works and sometimes it doesn't. I am using $("#nav").load("url"); to load the navbar so that I can make changes and ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

htmlcss

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

jquerycsstooltip

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Implementing a jQuery function to trigger window resize on window load

I'm facing an issue with my resize function where the contents within a window change when it reaches a certain width. I'm trying to achieve this same effect on window load but haven't been successful so far. Here's what I've attem ...

jquerycss

What is the best way to conceal a CSS div through PHP if the div is empty?

I need some help refining my previous question to ensure clarity. Is there a straightforward method for hiding a div when it doesn't contain any information, without causing confusion for the client? This specific div receives information from Jooml ...

phpcssjoomlajoomla-template

Having trouble positioning text alongside a checkbox in Bootstrap v3.3.6?

Dealing with the alignment of checkboxes in Bootstrap forms is driving me crazy. It seems to look almost perfect on both Chrome and IE on my desktop, where the text and checkbox are aligned almost perfectly. However, when I view it on Chrome on my tablet ...

csstwitter-bootstrap

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

javascriptjqueryhtmlcss

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

javascripthtmlcsspdfiframe

Conceal the server's internal file structure to prevent it from being displayed in sources

When I visit my website and inspect the elements in Google Chrome, I am able to see a list of all the folders on my site under the sources tab. This reveals their original names and allows for the downloading of the entire website code. I am concerned abo ...

phpcss.htaccessjoomlaamazon-ec2

What is the best way to integrate an image gallery with twitter bootstrap?

I'm having trouble implementing an image gallery on my index page. Despite my efforts, I can't seem to achieve the desired behavior. Here's a snippet of my code: .container .row .col-md-8.col-sm-8.col-xs-8 - 4.times do |i| ...

cssimagetwitter-bootstrap

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

Having trouble getting my absolute div to center?

Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...

htmlcss