text-overflow:ellipsis使作用就是当文字超过指定长度时我们就会在文本最后面增加省略号了，在ie浏览器中这个是没有问题的， 但在Firefox浏览器中就会出现省略号浮动在上面了，下面我把我的解决办法分享给各位。
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>
<div id="cover"></div>
<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> | Copyright2003-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 增加一下。
