text-overflow：链接上的省略号 [英] text-overflow:ellipsis on a link

问题描述

我想在链接上使用文本溢出属性。

 
 code>< div> 
< ul> 
< li> 
< p>文字过长< / p> 
< / li> 
< li> 
< a href =javascript：alert（'test'）>链接太长< / 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/

非常感谢您的帮助。

$ b标记是一个内联元素，您只能将省略号应用于一个元素，而不是一个元素。

块元素，尝试 a {display：block; } 并且它工作

I want to use text-overflow property on a link. I work for a paragraph but not for a link.

Here is the 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>

Here is the css code :

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

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

See example on http://jsfiddle.net/corinnekm/LLVDB/

Thanks a lot for your help.

解决方案

an <a> tag is an inline element, you can only apply ellipsis to a block element, try a { display: block; } and it works

这篇关于text-overflow：链接上的省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！