How can I truncate link text on a header with an ellipsis but keep the image at the end as a glyphicon? And all of this without using JS. Here's my code:
<!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>
The link is unfortunately being truncated along with the image. So, I tried moving the image outside the anchor tag:
<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>
However, this doesn't work as expected - when I hover over the image, the link isn't underlined.
I also tried moving the image before the link and using 'pull-right' for the image, which worked as expected. But in the mobile version, the design is different and the image unintentionally moves to the right.
Thank you in advance for your assistance.