我有一个非常基本的链接('a' 元素),列表项中有省略号溢出:
a {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<ul>
<li><a href="#">test</a>
</li>
</ul>
这导致谷歌浏览器:
*
test
在 Firefox 中,这会导致:
* test
我想要后者。但是为什么 Google 和 Safari 无法正确呈现它以及如何解决这个问题?
您可以通过display:inline-block
在<a>
元素上使用来解决此问题:
a {
display:inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
<ul>
<li><a href="#">test</a></li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句