CSS text-overflow: ellipsis; not working?

Question

I don't know why this simple CSS isn't working...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Should cut off around the 4th "Test"

Solution 1

text-overflow:ellipsis; only works when the following are true:

• The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
• The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

• Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
• Set one of its container elements to display:block and give that element a fixed width or max-width.
• Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Useful references:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Solution 2

The accepted answer is awesome. However, you can still use % width and attain text-overflow: ellipsis. The solution is simple:

display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

It seems whenever you use calc, the final value is rendered in absolute pixels, which consequentially converts 80% to something like 800px for a 1000px-width container. Therefore, instead of using width: [YOUR PERCENT]%, use width: calc([YOUR PERCENT]%).

Solution 3

So if you reach this question because you're having trouble trying to get the ellipsis working inside a display: flex container, try adding min-width: 0 to the outmost container that's overflowing its parent even though you already set a overflow: hidden to it and see how that works for you.

More details and a working example on this codepen by aj-foster. Totally did the trick in my case.

Solution 4

Include the four lines written after the info for ellipsis to work

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;
 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */
 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Solution 5

I faced the same issue and it seems like none of the solution above works for Safari. For non-safari browser, this works just fine:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

For Safari, this is the one that works for me. Note that the media query to check if the browser is Safari might change over time, so just tinker with the media query if it doesn't work for you. With line-clamp property, it would also be possible to have multiple lines in the web with ellipsis, see here.

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

View more solutions