Use text-overflow: ellipsis on an anchor tag

Question

How can you make a <a> tag use the text-overflow: ellipsis property? I have long link names that I would like to truncate.

Here is my attempt using the usual text-overflow approach.

http://jsfiddle.net/2Wg8N/

Answer 1

You'll need to change it to display: block; or something else like inline-block and specify a width, e.g:

a {
    width: 50px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}