Firefox text-overflow:ellipsis省略號浮動在上面

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> | Copyright &#169; 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 增加一下。

更多相關文章
  • 文章標題長了我們一般會使用css或js或程序來直接截斷標題顯示了,今天我把這三個方面的方法都給各位簡單的介紹一下,希望例子能給你帶來幫助哦,有需要的可進入參考.CSS文本溢出省略號text-overflow:ellipsisext-overflow是一個比較特殊的屬性,W3C早前的文檔中(目前的文檔 ...
  • 下面我總結了大家常用的一些CSS超出文本用省略號顯示代碼,這裏都會兼容firefox IE6 IE7等主流浏覽器.CSS設置文本溢出不顯示或顯示省略號,只顯示一定長度的文本,ie9下只需設置 代碼如下 div{white-space:nowrap;text-overflow: none;} 或 代碼 ...
  • 在頁面中如果我看到標題過長我們可以使用text-overflow:ellipsis;來實現省略號了,但是有時會發現不兼容,那我們也可以使用js來實現,下面我總結了一些方法.firefox7.0開始兼容text-overflow:ellipsis;這樣的話,以後的省略號就可以做到浏覽器兼容了,代碼片段 ...
  • 一個不錯的解決文本溢出省略號的實現方法,有需要了解的朋友可參考.在ie中我們只要簡單的利用text-overflow 這個 CSS 屬性實現文本溢出省略號.例 代碼如下 .entry_title{ white-spa
  • CSS浮動與清除浮動(overflow)例子
    在css中浮動與清除浮動功能是我們開發中常用到的一個功能了,下面小編來爲各位分析關于CSS浮動與清除浮動(overflow)例子吧.float脫離文本流,可是爲什麽文字卻會有環繞的效果,這點實在是神奇,于是乎就去問了師匠:Normal flow is the way that elements ar
  • 文章提供三種關于文章標題過長了,控制顯示爲略號方法,下面有三款css教程控制省略號方式顯示(ie.ff)代碼,後兩款都兼容ie,firefox.div{width:200px;/*容器的基本定義*/height:20
  • 下文給各位介紹一個css利用clearfix方法清除浮動一些方法,非常的實用,希望能幫助到大家.一,什麽是.clearfix你只要到Google或者Baidu隨便一搜"css清除浮動",就會發現很多網站都講到"盒子清
  • 本文章來給各位同學介紹關于css中inline-block代替浮動布局float:left實例介紹,希望此教程對各位同學會有所幫助哦.基于各位前輩的辛勤勞動,下面得出使用inline-block替換float:left;的最佳方案.html代碼 代碼如下 <div class="li ...
一周排行