टेक्स्ट ओवरफ्लो: लिंक पर ellipsis

Question

मैं एक लिंक पर टेक्स्ट ओवरफ्लो प्रॉपर्टी का उपयोग करना चाहता हूं। मैं एक अनुच्छेद के लिए काम करता हूं लेकिन एक लिंक के लिए नहीं।

यहाँ एचटीएमएल कोड

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

है यहाँ सीएसएस कोड है:

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/ एक सीएसएस truncate नियमों का समूह होता है। देखें 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>