przepełnienie tekstem: wielokropek na łączu

Chcę użyć właściwości przepełnienia tekstem w linku. Pracuję dla akapitu, ale nie dla linku.

Oto kod HTML

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

Oto kod css:

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

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

Zobacz przykład nahttp://jsfiddle.net/corinnekm/LLVDB/

Bardzo dziękuję za Twoją pomoc.

questionAnswers(2)

yourAnswerToTheQuestion