CODEWITHSUNDEEP
htmlanchorcss
Don P
Don P

Reputation: 63718

Use text-overflow: ellipsis on an anchor tag

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/

Upvotes: 19

Views: 31599

Answers (1)

joshuahealy
joshuahealy

Reputation: 3569

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;
}

Upvotes: 54

Related Questions