text-overflow:ellipsis on a link

Question

I want to use text-overflow property on a link. I work for a paragraph but not for a link.

Here is the HTML code

<div>   <ul>     <li>         <p>the text is too long</p>     </li>        <li>          <a href="javascript:alert('test')">the link is too long</a>     </li>   </ul> </div> 

Here is the css code :

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

See example on http://jsfiddle.net/corinnekm/LLVDB/

Thanks a lot for your help.

Answer 1

an <a> tag is an inline element, you can only apply ellipsis to a block element, try a { display: block; } and it works