CODEWITHSUNDEEP
css
Greg
Greg

Reputation: 31378

Does CSS text-overflow: ellipsis work on Anchor tags?

Why does the following CSS not work?

a {
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Upvotes: 23

Views: 16905

Answers (3)

The Alpha
The Alpha

Reputation: 146219

It's for box model, display:block will do the job

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

But it may cause you other problems to make the anchor(inline element) behave like box model element (display:block).

Reference: text-overflow

Update:

display:inline-block

Demo.

Upvotes: 10

Martin
Martin

Reputation: 6687

It's because anchors are as standard, inline elements. Adding display:inline-block will make the above code work.

Upvotes: 37

Mat Richardson
Mat Richardson

Reputation: 3606

Add display: block to your css.

Upvotes: 1

Related Questions