CSS text-overflow: ellipsis; not working?
The accepted answer is awesome. However, you can still use %
width and attain text-overflow: ellipsis
. The solution is simple:
display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */
It seems whenever you use calc
, the final value is rendered in absolute pixels, which consequentially converts 80%
to something like 800px
for a 1000px
-width container. Therefore, instead of using width: [YOUR PERCENT]%
, use width: calc([YOUR PERCENT]%)
.
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
andwhite-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
ordisplay:block
(probably the former, but depends on your layout needs). - Set one of its container elements to
display:block
and give that element a fixedwidth
ormax-width
. - Set the element to
float:left
orfloat: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