Firefox text-overflow:ellipsis省略号浮动在上面

作者：袖梨 2022-06-25

text-overflow:ellipsis 属性通常用于隐藏超出长度的文本，并在文本最后面增加省略号。

456bereastreet 发现：如果在网页的交互等过程中，出现一个新层（例如鼠标移动到下拉菜单，弹出下拉菜单内容），在 Firefox 下，文本内容当然会被新弹出内容遮住，但是省略号并不会。它会出现在新层的上面。

可以使用 Firefox 打开 Demo 看一下具体效果。

代码如下

复制代码

Firefox and the magical text-overflow:ellipsis z-index demo page | Lab | 456 Berea Street

Firefox and the magical text-overflow:ellipsis z-index demo page

This is a demo document related to the article firefox_and_the_magical_text-overflowellipsis_z-index/">Firefox and the magical text-overflow:ellipsis z-index. Please see the article for context and information.

This text will overflow its container. This text will overflow its container.

如果你也遇到了这个问题，解决方法很简单，只需要为新弹出的覆盖层的 z-index 属性赋值为 >1 的数值即可，这样就可以解决了。你可以在上面的 Demo 中，使用 Firebug 增加一下。

Firefox text-overflow:ellipsis省略号浮动在上面

Firefox and the magical text-overflow:ellipsis z-index demo page

相关文章

精彩推荐