CSS text-overflow: ellipsis; not working?

css, ellipsis, overflow

Solution

`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

Problem

Original source

Related problems

• Applying an ellipsis to multiline text
• Prevent flex items from overflowing a container
• Why don't flex items shrink past content size?
• With CSS, use "..." for overflowed block of multi-lines
• Truncating long strings with CSS: feasible yet?