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

    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: