tràn văn bản: dấu ba chấm trên một liên kết

Question

Tôi muốn sử dụng thuộc tính tràn văn bản trên một liên kết. Tôi làm việc cho một đoạn văn chứ không phải cho một liên kết.

Đây là HTML code

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

Đây là mã css:

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

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

Xem ví dụ trên http://jsfiddle.net/corinnekm/LLVDB/

Cảm ơn rất nhiều sự giúp đỡ của bạn.

Answer 1

thẻ <a> là một yếu tố nội tuyến, bạn chỉ có thể áp dụng ellipsis để một yếu tố ngăn chặn, thử a { display: block; } và nó hoạt động

Answer 2

http://primercss.io/utilities/ có truncate css thiết lập các quy tắc. Xem 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>