我想用省略号截断标题上的链接文本,但将 img 保留在最后,它的作用是一个字形。一切都没有JS。我的代码:
<!DOCTYPE html>
<html>
<body>
<ul>
<li>
<a href="#">Very long text very long text very long text<img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a>
</li>
</ul>
<style>
img{
width: 20px;
}
li{
list-style-type: none;
}
a{
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: red;
}
</styles>
</body>
</html>
不幸的是,链接被 img 截断了。所以我已经将 img 移到标签之外:
<ul>
<li>
<a href="#">Very long text very long text very long text</a><span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></span>
</li>
</ul>
这不像预期的那样工作 - 当我将鼠标悬停在 img 上时,链接没有加下划线。
我也尝试在链接之前移动 img 并对 img 使用“右拉”并按预期工作,但在移动版本设计上有所不同,因此 img 无意中向右移动。
在此先感谢您的帮助。
而不是在包含字形的锚标记上应用椭圆,您应该在锚内放置一个跨度并将椭圆应用于它。这样文本和图标都是可点击的,但只有文本被省略了。
img{
width: 20px;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
a span{
width: 150px;
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a:hover{
text-decoration: underline;
color: red;
}
<ul>
<li>
<a href="#"><span>Very long text very long text very long text</span><img src="https://banner2.kisspng.com/20180203/tsq/kisspng-arrow-ico-icon-right-arrow-png-photo-5a758aa9a205b1.5795578115176526496637.jpg"></a>
</li>
</ul>
这是一个有效的jsfiddle。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句