使用省略号截断 <a> 中的字符串,但最后保留 img - 没有 JS

浪费

我想用省略号截断标题上的链接文本,但将 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将perl中的字符串截断为带有尾随省略号的子字符串

来自分类Dev

使用正则表达式删除带有省略号的未完成的字符串

来自分类Dev

截断标题旁边带有省略号的文本

来自分类Dev

<img> -tag中的JS函数没有被调用

来自分类Dev

省略项中的省略号省略

来自分类Dev

选择对象上的空格和带有省略号的截断

来自分类Dev

为什么下面的省略号/截断函数不能以相同的长度切割字符串?

来自分类Dev

如何使用中间没有省略号的 numpy 打印矩阵?

来自分类Dev

使函数对help()函数中的参数使用省略号

来自分类Dev

div中没有img时没有高度

来自分类Dev

HTML中的“智能”溢出:有没有办法在结尾处带有链接的省略号“ ...”以查看整个内容?

来自分类Dev

某些数字或具有单词边界的字符后的省略号

来自分类Dev

没有显示在有序列表中的列表项中的数字,显示如下:inline-block; 和文本溢出:省略号;

来自分类Dev

Delphi IDE中的“项目选项”中的省略号按钮是否有键盘快捷键?

来自分类Dev

框中的多行带有省略号和中间垂直对齐

来自分类Dev

文字溢出:省略号在有限的显示行中不起作用

来自分类Dev

sprintf在C中带有省略号,用于宏定义会导致编译错误

来自分类Dev

当长行/宽列被截断时,如何从Python Pandas系列或数据框中的行中删除省略号?

来自分类Dev

没有字符串Minimist Node JS

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

如何避免Dplyr中的省略号...?

来自分类Dev

计算python中的省略号

来自分类Dev

Beautifulsoup没有img

来自分类Dev

我想使用省略号在资产名称中显示20个字符

来自分类Dev

TextView:在省略号后添加文本或更改省略号字符

来自分类Dev

tinyMCE删除段落中没有IMG的文本?

来自分类Dev

从没有 ID 的 Img 中获取 ID

来自分类Dev

带有文本省略号的表格单元中的contenteditable div在IE11中不起作用

来自分类Dev

在几乎没有固定值的字符串中搜索子字符串,并保留所有字符

Related 相关文章

  1. 1

    将perl中的字符串截断为带有尾随省略号的子字符串

  2. 2

    使用正则表达式删除带有省略号的未完成的字符串

  3. 3

    截断标题旁边带有省略号的文本

  4. 4

    <img> -tag中的JS函数没有被调用

  5. 5

    省略项中的省略号省略

  6. 6

    选择对象上的空格和带有省略号的截断

  7. 7

    为什么下面的省略号/截断函数不能以相同的长度切割字符串?

  8. 8

    如何使用中间没有省略号的 numpy 打印矩阵?

  9. 9

    使函数对help()函数中的参数使用省略号

  10. 10

    div中没有img时没有高度

  11. 11

    HTML中的“智能”溢出:有没有办法在结尾处带有链接的省略号“ ...”以查看整个内容?

  12. 12

    某些数字或具有单词边界的字符后的省略号

  13. 13

    没有显示在有序列表中的列表项中的数字,显示如下:inline-block; 和文本溢出:省略号;

  14. 14

    Delphi IDE中的“项目选项”中的省略号按钮是否有键盘快捷键?

  15. 15

    框中的多行带有省略号和中间垂直对齐

  16. 16

    文字溢出:省略号在有限的显示行中不起作用

  17. 17

    sprintf在C中带有省略号,用于宏定义会导致编译错误

  18. 18

    当长行/宽列被截断时,如何从Python Pandas系列或数据框中的行中删除省略号?

  19. 19

    没有字符串Minimist Node JS

  20. 20

    文字溢出:IE中的省略号

  21. 21

    如何避免Dplyr中的省略号...?

  22. 22

    计算python中的省略号

  23. 23

    Beautifulsoup没有img

  24. 24

    我想使用省略号在资产名称中显示20个字符

  25. 25

    TextView:在省略号后添加文本或更改省略号字符

  26. 26

    tinyMCE删除段落中没有IMG的文本?

  27. 27

    从没有 ID 的 Img 中获取 ID

  28. 28

    带有文本省略号的表格单元中的contenteditable div在IE11中不起作用

  29. 29

    在几乎没有固定值的字符串中搜索子字符串,并保留所有字符

热门标签

归档