Question

I wanna truncate link text on header with elippsis but keep img in the end which lead role a glyphicon. All without JS. 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>

Unfortunately link is truncated with img. So I've moved img outside 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>

This isn't work as expected - when I hover over img, link isn't underlined.

I try as well move img before link and use 'pull-right' for img and work as expected but on mobile version design is different so img unintentionally move to right.

Thanks in advance for your help.

Answer 1

与其在包含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>

这里是工作中的jsfiddle。

截断<a> with ellipsis but keep img in the end - without JS

1 个答案: