CSS 文本溢出：链接上的省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12820007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-overflow:ellipsis on a link
提问by Corinne Kubler
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
这是 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>
Here is the css code :
这是CSS代码：
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/
请参阅http://jsfiddle.net/corinnekm/LLVDB/ 上的示例
Thanks a lot for your help.
非常感谢你的帮助。
回答by Andy
an <a>tag is an inline element, you can only apply ellipsis to a block element, try a { display: block; }and it works
一个<a>标记是一个内联元素，你只能申请省略号块元素，试着a { display: block; }和它的工作原理
回答by Gilles
http://primercss.io/utilities/has a css truncate set of rules. See https://jsfiddle.net/illegs/g04L9xd6/
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>
