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 ...
一周排行
  • 由于asp對圖片處理這一款沒有函數處理,我們就利用了一件aspjpeg來對圖片進行增加水印,比較縮放等效果,這款水印可以在1:左上 2:上中 3:右上 4:左中 5:中中 6:右中 7:左下 8:中下 9:右下不同位
  • Java編程中列印函數有print.printf.println,有時我們經常會搞混這幾個函數的功能有什麽區別,本文我們詳細來講解析一下他們有何相同及不同.printf主要是繼承了C語言的printf的一些特性,可以
  • 國內免費100GB的PHP網站空間申請地址
    很多沒有找到免費空間了,下面小編整理了篇適用于個人網站.企業官網. 地方/行業門戶.商城. ...
  • 一般認識url傳遞參數是以get方式,不過我們也可以用post傳遞,特別是在做一些接口時,非常有用,本文我們列舉了用php和Javascript實現的方法.PHP實現方法在做接口,post傳遞方式,數據以字符串形式傳
  • session爲伺服器端全局變量了也是非常常用的一個後端驗證的變量,在Symfony自帶有session的方法,下面我們一起來看看Symfony2 session學習筆記吧.以前老版本2.2及以前的session用法
  • 在JavaScript中,onload函數是最經常使用的,幾乎涉及到JavaScript的童鞋都少不了要接觸它.這個函數的作用就是等待網頁完全裝載完了以後再去執行代碼塊內的語句,因爲按照文檔流的執行順序,通常用于頭部
  • 以下是一個測試的靜態html,爲bug重現及及解決方法.view sourceprint?01 <!doctype html> 02 <html> 03 <head> 04 < ...
  • 現在使用android與蘋果的用戶越來越多了,那伺服器就不支持apk與iphone文件下載了,我們點擊一般會自動保存成zip或rar文件了,下面我來介紹讓伺服器apache/iis/nginx支持.apk文件下載配置 ...
  • 在php中默認只能上傳2MB大小的文件,如果想上傳更多更大的文件我們需要修改一些參數,下面大家來參考一下.linux系統1./usr/local/nginx/conf/nginx.conf修改client_max_b
  • 暖暖環遊世界百美圖年少如夢4S級高分服裝搭配方法分享
    在暖暖環遊世界的這一款遊戲裏面,新一期的百美圖已經開啓,本次的百美圖將在汴京進行,那麽到底