我想用elippsis截断标题上的链接文本，但在结尾保留img，这将导致一个glyphicon。全部没有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无意中向右移动。
提前感谢您的帮助。
不要在包含glyphicon的锚标记上应用椭圆，而是应该在锚内放置一个跨度并对其应用椭圆。这样，文本和图标都可以单击，但只有文本是省略号。
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>这是一把正在工作的小提琴。