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

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

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

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

代码如下

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Firefox and the magical text-overflow:ellipsis z-index demo page | Lab | 456 Berea Street</title>
<style media="screen,print">
@import '/css/lab.css';
#body {
  width:70em;
  max-width:100%;
  margin:0 auto;
}
.text {
  width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1em;
  white-space:nowrap;
}
#cover {
  position:absolute;
  width:200px;
  height:100px;
  border:2px solid #999;
  background:#fff;
}

</style>
</head>
<body>
<div id="body">
<h1>Firefox and the magical text-overflow:ellipsis z-index demo page</h1>

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

<p class="text">This text will overflow its container. This text will overflow its container.</p>

  <div id="labfooter">
<p><a href="/lab/">Lab Index</a> | <a href="/">456 Berea Street Home</a> | Copyright © 2003-2013 Roger Johansson</p>
</div>
</div>
<script src="/js/jquery-1.9.1.min.js"></script>
<script>
$(function() {
  $('<button>Toggle cover</button>').on('click', function () {
   $('#cover').toggle();
  }).insertBefore($('#cover'));
});
</script>
</body>
</html>

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

时间： 2024-11-01 19:13:19

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

Firefox text-overflow:ellipsis省略号浮动在上面的相关文章

overflow解决float浮动后高度自适应问题

css中overflow解决float浮动后高度自适应的问题

css 单行文本溢出显示省略号解决办法

CSS样式表在Firefox和IE下的区别

简单实现js浮动框_javascript技巧

CSS技巧（一）：清除浮动

用CSS实现标题过长部分用省略号显示

CSS:清除浮动的最优方法

CSS出现overflow的一些问题