text-overflow: puntos suspensivos en un enlace

Question

Quiero usar la propiedad de desbordamiento de texto en un enlace. Trabajo para un párrafo pero no para un enlace.

Aquí está el código 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> 

Aquí está el código CSS:

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

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

Ver ejemplo en http://jsfiddle.net/corinnekm/LLVDB/

Gracias mucho por su ayuda.

Answer 1

una etiqueta <a> es un elemento en línea, sólo se puede aplicar puntos suspensivos para un elemento de bloque, tratar a { display: block; } y funciona

Answer 2

http://primercss.io/utilities/ tiene un truncado css conjunto de reglas. Ver https://jsfiddle.net/illegs/g04L9xd6/

.css-truncate.css-truncate-target, 
.css-truncate .css-truncate-target { 
display: inline-block; 
max-width: 50px; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 
vertical-align: top 
} 

.css-truncate.expandable.css-truncate-target, 
.css-truncate.expandable.css-truncate-target, 
.css-truncate.expandable:hover .css-truncate-target, 
.css-truncate.expandable:hover.css-truncate-target { 
max-width: 10000px !important 
} 

<span class="css-truncate expandable"> 
<span class="branch-ref css-truncate-target"><a href="javascript:alert('test')">the link is too long</a></span>