overflow di testo: puntini di sospensione su un collegamento

Question

Desidero utilizzare la proprietà di overflow del testo su un collegamento. Lavoro per un paragrafo ma non per un collegamento.

Ecco il codice 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> 

Ecco il codice CSS:

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

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

Per esempio a http://jsfiddle.net/corinnekm/LLVDB/

Grazie mille per il vostro aiuto.

Answer 1

un tag <a> è un elemento inline, è possibile applicare solo puntini di sospensione per un elemento di blocco, provare a { display: block; } e funziona

Answer 2

http://primercss.io/utilities/ ha un troncare css insieme di regole. Vedere 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>