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"

Answer 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