Przepełnienie tekstu: wielokropek na łączu

Question

Chcę użyć właściwości przepełnienia tekstu w łączu. Pracuję dla akapitu, ale nie dla łącza.

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

Patrz przykład na http://jsfiddle.net/corinnekm/LLVDB/

dziękuję za pomoc.

Answer 1

tag <a> jest elementem inline, można zastosować tylko wielokropek do elementu blokowego, spróbuj a { display: block; } i działa

Answer 2

http://primercss.io/utilities/ ma css skróconego zestawu reguł. Zobacz 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>