Search code examples
overflowellipsiscss

CSS text-overflow: ellipsis; not working?

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

  • 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: