css - 文本溢出：链接上的省略号

Question

我想在链接上使用 text-overflow 属性。我为段落工作，但不为链接工作。

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