CSS text-overflow: ellipsis; not working?

overflow ellipsis css
ChristopherStrydom picture ChristopherStrydom · Jul 22, 2013 · Viewed 364.3k times · Source

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

Should cut off around the 4th "Test"

Answer

Spudley picture Spudley · Jul 22, 2013

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:

Related questions

Limit text length to n lines using CSS

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically). text-overflow: ellipsis; only works for 1 line text. original text: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, …

Read More
text-overflow ellipsis does not work with dynamic width

hope someone can help. I have 3 nested div. Parent, children and children's children. What i want to accomplish (the motive is not relevant) is that that child gets a relative width depending on the parent's width (a percentage) and the …

Read More
white-space: nowrap; and flexbox did not work in chrome

Recent update of Chrome breaks white-space: nowrap using text-overflow: ellipsis; on a overflow: hidden element. How to fix that without adding hard-coded width on name class.. <h1>problem</h1> <div class="container"> <div …

Read More