在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

约斯特

我有一个非常基本的链接('a' 元素),列表项中有省略号溢出:

a {
  display: block; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}
<ul>
  <li><a href="#">test</a>
  </li>
</ul>

这导致谷歌浏览器:

*
  test

在 Firefox 中,这会导致:

* test

我想要后者。但是为什么 Google 和 Safari 无法正确呈现它以及如何解决这个问题?

塞巴斯蒂安·布罗施

您可以通过display:inline-block<a>元素使用来解决此问题

a {
  display:inline-block; 
  width: 100%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
  vertical-align: top;
}
<ul>
  <li><a href="#">test</a></li>
</ul>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

来自分类Dev

无法使用 iPhone(Chrome 和 Safari)以隐身模式登录

来自分类Dev

Chrome和Safari绝对Div显示问题

来自分类Dev

Google字体Chrome,Safari和Firefox

来自分类Dev

Safari和Chrome中的密码输入字段

来自分类Dev

Chrome,Safari和Firefox中的内嵌块和行高渲染方式不同

来自分类Dev

Cookie未在Safari和iOS中设置,但可以在ff,chrome中使用

来自分类Dev

我的div在Firefox中无法对齐(可在Chrome和Safari中使用)

来自分类Dev

在Safari和Firefox中(而不是在Chrome中)拖动溢出div滚动内容

来自分类Dev

Firefox无访问权限允许起源,但可与Chrome和Safari一起使用

来自分类Dev

排序/排序文本和数字可在Firefox和Chrome中使用,但不能在Safari中使用

来自分类Dev

SVG笔划破折号在IOS(Safari和Chrome)上运行异常

来自分类Dev

链接在Firefox中有效,但在Chrome和Safari中无效

来自分类Dev

Google为Chrome和Safari的ajax驱动器断开了链接

来自分类Dev

文本仅在Firefox和Safari中显示为粗体,而不在Chrome中显示为粗体

来自分类Dev

CSS动画可以在Chrome和Safari中使用,但不能在Firefox和Internet Explorer中使用

来自分类Dev

jQuery ajax可在Chrome和Safari中使用,但不能在IE8和Firefox中使用

来自分类Dev

在Chrome和Safari中更改空间和宽度

来自分类Dev

CSS网格:网格模板行自动在Safari,Firefox和Chrome中显示不同的结果

来自分类Dev

:not()选择器在Safari和Chrome / Firefox之间表现不一样

来自分类Dev

Gallery块在WP Gallery功能中分解并融为一体(Safari和Chrome问题)

来自分类Dev

无法在Chrome / Safari中结合使用CSS Sprite和背景渐变

来自分类Dev

使用jQuery,HTML输入字段值设置器在Chrome和Safari中无法正常工作

来自分类Dev

在Firefox,Safari和Chrome中可使用布局确定,但在IE中则不会

来自分类Dev

Safari和Chrome不会在OS X El Capitan上使用Web代理(HTTP)

来自分类Dev

使用jQuery,HTML输入字段值设置器在Chrome和Safari中无法正常工作

来自分类Dev

文本溢出省略号和flex在Firefox上不起作用

来自分类Dev

伪元素的CSS动画可在Chrome和IE中使用,但在Safari和Firefox中是固定的,没有“ position:absolute”

来自分类Dev

视差无法在Chrome或Safari中使用

Related 相关文章

  1. 1

    滚动时文本溢出省略号未在Chrome和IE中显示溢出内容

  2. 2

    无法使用 iPhone(Chrome 和 Safari)以隐身模式登录

  3. 3

    Chrome和Safari绝对Div显示问题

  4. 4

    Google字体Chrome,Safari和Firefox

  5. 5

    Safari和Chrome中的密码输入字段

  6. 6

    Chrome,Safari和Firefox中的内嵌块和行高渲染方式不同

  7. 7

    Cookie未在Safari和iOS中设置,但可以在ff,chrome中使用

  8. 8

    我的div在Firefox中无法对齐(可在Chrome和Safari中使用)

  9. 9

    在Safari和Firefox中(而不是在Chrome中)拖动溢出div滚动内容

  10. 10

    Firefox无访问权限允许起源,但可与Chrome和Safari一起使用

  11. 11

    排序/排序文本和数字可在Firefox和Chrome中使用,但不能在Safari中使用

  12. 12

    SVG笔划破折号在IOS(Safari和Chrome)上运行异常

  13. 13

    链接在Firefox中有效,但在Chrome和Safari中无效

  14. 14

    Google为Chrome和Safari的ajax驱动器断开了链接

  15. 15

    文本仅在Firefox和Safari中显示为粗体,而不在Chrome中显示为粗体

  16. 16

    CSS动画可以在Chrome和Safari中使用,但不能在Firefox和Internet Explorer中使用

  17. 17

    jQuery ajax可在Chrome和Safari中使用,但不能在IE8和Firefox中使用

  18. 18

    在Chrome和Safari中更改空间和宽度

  19. 19

    CSS网格:网格模板行自动在Safari,Firefox和Chrome中显示不同的结果

  20. 20

    :not()选择器在Safari和Chrome / Firefox之间表现不一样

  21. 21

    Gallery块在WP Gallery功能中分解并融为一体(Safari和Chrome问题)

  22. 22

    无法在Chrome / Safari中结合使用CSS Sprite和背景渐变

  23. 23

    使用jQuery,HTML输入字段值设置器在Chrome和Safari中无法正常工作

  24. 24

    在Firefox,Safari和Chrome中可使用布局确定,但在IE中则不会

  25. 25

    Safari和Chrome不会在OS X El Capitan上使用Web代理(HTTP)

  26. 26

    使用jQuery,HTML输入字段值设置器在Chrome和Safari中无法正常工作

  27. 27

    文本溢出省略号和flex在Firefox上不起作用

  28. 28

    伪元素的CSS动画可在Chrome和IE中使用,但在Safari和Firefox中是固定的,没有“ position:absolute”

  29. 29

    视差无法在Chrome或Safari中使用

热门标签

归档