Html 截断<；中的字符串；a>；带省略号，但在结尾保留img-不带JS_Html_Css_Image_Hyperlink_Hover

Html 截断<；中的字符串；a>；带省略号，但在结尾保留img-不带JS

html css image hyperlink

Html 截断<；中的字符串；a>；带省略号，但在结尾保留img-不带JS,html,css,image,hyperlink,hover,Html,Css,Image,Hyperlink,Hover,我想用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/20

我想用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{
宽度：20px；
}
李{
列表样式类型：无；
}
a{
宽度：150px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
颜色：红色；
}

不幸的是，链接被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无意中向右移动

提前感谢您的帮助。

不要在包含Glyphion图标的锚定标记上应用椭圆，而应该在锚定内放置一个跨距，并对其应用椭圆。这样，文本和图标都可以单击，但只有文本被省略

img{
宽度：20px；
}
李{
列表样式类型：无；
}
a{
文字装饰：无；
}
跨度{
宽度：150px；
显示：内联块；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
a:悬停{
文字装饰：下划线；
颜色：红色；
}

不要在包含Glyphion图标的锚定标记上应用椭圆，而应该在锚定内放置一个跨距，并对其应用椭圆。这样，文本和图标都可以单击，但只有文本被省略

img{
宽度：20px；
}
李{
列表样式类型：无；
}
a{
文字装饰：无；
}
跨度{
宽度：150px；
显示：内联块；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
a:悬停{
文字装饰：下划线；
颜色：红色；
}

两个答案都让我满意。非常感谢。两个答案都使我满意。非常感谢。