THE BEST EXPLANATION
====================
text-overflow:ellipsis; only works when the following are true:
1. The element's width must be constrained in px (pixels).
2. Width in % (percentage) won't work.
3. The element must have:
overflow:hidden;
white-space:nowrap;
- 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:
1. Set the element to display:inline-block or display:block.
2. Set one of its container elements to display:block
and give that element a fixed width or max-width.
3. 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