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>

text-overflow：链接上的省略号

2 个答案: