CSS text-overflow: ellipsis; not working?

by

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:

More Related Contents:

  1. Why is this inline-block element pushed downward?
  2. Limit text length to n lines using CSS
  3. Why does CSS2.1 define overflow values other than “visible” to establish a new block formatting context?
  4. CSS margin terror; Margin adds space outside parent element [duplicate]
  5. With CSS, use “…” for overflowed block of multi-lines
  6. Make background color extend into overflow area
  7. text-overflow:ellipsis in Firefox 4? (and FF5)
  8. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  9. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  10. Check if an element’s content is overflowing?
  11. CSS margin adds space outside parent element [duplicate]
  12. parent & child with position fixed, parent overflow:hidden bug
  13. Place text after dots inline with the second line of text overflow ellipsis
  14. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  15. text-overflow is not working when using display:flex
  16. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  17. Does overflow:hidden applied to work on iPhone Safari?
  18. Position absolute and overflow hidden
  19. Why doesn’t CSS ellipsis work in table cell?
  20. Flexbox affects overflow-wrap behavior
  21. Make child visible outside an overflow:hidden parent
  22. Div height 100% and expands to fit content [duplicate]
  23. CSS text ellipsis when using variable width divs
  24. Overflow to left instead of right
  25. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  26. How to ignore parent element’s overflow:hidden in css
  27. text-overflow:ellipsis doesn’t work on IE
  28. Issue when centering vertically with flexbox when heights are unknown
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content

Leave a Comment