CSS text-overflow: ellipsis; not working?

419

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

_x000D_
_x000D_
.app a {_x000D_
  height: 18px;_x000D_
  width: 140px;_x000D_
  padding: 0;_x000D_
  overflow: hidden;_x000D_
  position: relative;_x000D_
  margin: 0 5px 0 5px;_x000D_
  text-align: center;_x000D_
  text-decoration: none;_x000D_
  text-overflow: ellipsis;_x000D_
  white-space: nowrap;_x000D_
  color: #000;_x000D_
}
_x000D_
<div class="app">_x000D_
  <a href="">Test Test Test Test Test Test</a>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Should cut off around the 4th "Test"

This question is tagged with overflow ellipsis css

~ Asked on 2013-07-22 03:01:43

The Best Answer is


1042

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.

_x000D_
_x000D_
.app a {_x000D_
  height: 18px;_x000D_
  width: 140px;_x000D_
  padding: 0;_x000D_
  overflow: hidden;_x000D_
  position: relative;_x000D_
  display: inline-block;_x000D_
  margin: 0 5px 0 5px;_x000D_
  text-align: center;_x000D_
  text-decoration: none;_x000D_
  text-overflow: ellipsis;_x000D_
  white-space: nowrap;_x000D_
  color: #000;_x000D_
}
_x000D_
<div class="app">_x000D_
  <a href="">Test Test Test Test Test Test</a>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Useful references:

~ Answered on 2013-07-22 08:46:17


58

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

display: inline-block; /* for em, a, span, etc (inline by default) */
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]%).

~ Answered on 2018-10-24 20:15:31


Most Viewed Questions: