文本溢出：鏈接上的省略號

Question

我想在鏈接上使用文本溢出屬性。我爲段落工作，但不爲鏈接。

下面是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> 

這裏是CSS代碼：

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

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

查看http://jsfiddle.net/corinnekm/LLVDB/

非常感謝你的幫助的例子。

Answer 1

的<a>標記是一個內聯元素，你只能申請省略號塊元素，嘗試a { display: block; }和它的作品

Answer 2

http://primercss.io/utilities/有一個CSS截斷一套規則。 見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>