1.常規css方法——可以實現ie,safari,chrome,opera瀏覽器下文字溢位省略號表示
這是一段測試文字,主要是用來測試文字溢位後是否會用省略號顯示。
.zxx_text_overflow_1
2.使用ellipsis.xml檔案使firefox支援文字溢位後點點點省略號表示
這段**呼叫了跨資料夾路徑的ellipsis.xml檔案,看firefox瀏覽器下是夠文字溢位省略號表示。
ps: 在firefox下上面div內容顯示空白,此div內容是:「這段**新增了跨資料夾路徑的ellipsis.xml檔案,看firefox瀏覽器下是夠文字溢位省略號表示」。
.zxx_text_overflow_2
這段**呼叫了同資料夾路徑的ellipsis.xml檔案,看firefox瀏覽器下是夠文字溢位省略號表示。
ps: 在firefox下上面div文字溢位省略號顯示,此div內容是「這段**呼叫了同資料夾路徑的ellipsis.xml檔案,看firefox瀏覽器下是夠文字溢位省略號表示」。至此,幾乎所有主流瀏覽器都實現文字溢位省略號表示。
.zxx_text_overflow_3
這裡有個小結論:這個使firefox瀏覽器下文字溢位省略號表示的ellipsis.xml檔案要在頁面的同一目錄下,或是下一級目錄下(我已測試),要是向上跨資料夾訪問或絕對路徑訪問則失效。原因不詳!
3.使用:after偽類和content實現文字溢位後省略號表示(嚴重不推薦!直接跳過)
憤慨:我實在忍不住了,我要臭罵一通。我很久之前就自己試過content實現後面的省略號表示,發現問題很多,遂想了其他方法。
我原本試試介紹這個方法的,但是我實在做不下去了!這個方法根本不行,一點都不行!要是n年前,只有ie6和firefox瀏覽器的時候,這個方法或許可以試試。現在根本不行,在現在看來,寫文章的人就是個大草包,要麼是個史前時代過來的程式設計師,文章裡面錯誤一大堆,用胡說八道形容一點都不為過,很多東西根本沒有經過驗證就那兒大放厥詞。1、說是相容,其實反而大大破壞了相容性,ie6和ie7下的表現就不一樣,一句ie「不支援max-width」就讓我想給作者扇個耳光,ie7不支援嗎,別告訴我你寫這文章時還沒有ie7瀏覽器。2、本來chrome瀏覽器,safari還有opera可以實現文字溢位省略號顯示的,現在受限與:after和content,就會一處理不當,文字直接被截,就很醜了。3、多套用了一層標籤,css也多了好幾行,沒有必要,資源消耗高。4、當文字很短時後面也還跟著個省略號,沒有溢位為什麼還要顯示省略號呢?
總之,結論就是這個方法一點點實用價值都沒有。所以嚴重不推薦!
4.我自己想出來的方法:margin負值定位法——相容所有主流瀏覽器
這是乙個比較短的文字。
…這是一段比較長的文字,用來測試是否文字溢位時會用省略號顯示。
…html部分: 這是一段比較長的文字,用來測試是否文字溢位時會用省略號顯示。
…css部分: .zxx_text_overflow_4 .zxx_text_overflow_4 .text_con .zxx_text_overflow_4 .text_dotted
簡要說明:此方法相容ie6,ie7(ie8未測過),firefox,chrome,safari,opera瀏覽器。沒有hack,沒有生僻的css樣式。文字短時,沒有省略號,文字溢位時就出現省略號。可以說是相當不錯的乙個方法。原理也很簡單:當文字內容足夠長時就把隱藏在上面的省略號層給擠下來了。關鍵就是點點點所在div層的高度的絕對值要比其margin的絕對值大那麼一點點。
5.jquery限制字元字數的方法
我的文字個數較少,不要殺我!
你個殺千刀的,怎麼寫了這麼多的文字,我要被攔腰...
html部分: 你個殺千刀的,怎麼寫了這麼多的文字,我要被攔腰截斷了啊,天啊!
沒有css啦,只有js**: $(document).ready(function() }); });
6.jquery自動判斷寬度是否超出的方法
我的文字個數較少,不要殺我!
你個殺千刀的,怎麼寫了這麼多的文字,我要被攔腰截斷...
html部分: 你個殺千刀的,怎麼寫了這麼多的文字,我要被攔腰截斷了啊,kitty救我!
css部分: .zxx_text_overflow_6
js部分: var wordlimit=function()); $(this).after(copythis); if(copythis.width()>$(this).width())else }); } wordlimit();
兩個jquery方法都是自己寫的,不算太難。前者直接限定字元個數,後者通過寬度判斷,去掉最後乙個字元,迴圈,直到文字內容寬度小於div的限制寬度。
文字內容溢位用點點點 省略號
我們在專案中一直都是使用js來控制如果文字內容超過的時候,用.來表示,其實是可以通過css來控制的,下面提供幾種辦法 測試的瀏覽器 ie6,ie7,ie8,chrome17 firefox10 1 css方法 text overflow fag width 500px white space now...
CSS 文字溢位省略成點點點
text 我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字我是單行文字 text text 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行文字我是多行文字 我是多行文字我是多行...
溢位的文字用省略號顯示
單行文字溢位顯示省略號 單行文字溢位顯示省略號 必須滿足三個條件 1.先強制一行內顯示文字 white space nowrap 預設 normal 自動換行 2.超出的部分隱藏 overflow hidden 3.文字用省略號替代超出的部分 text overflow ellipsis 多行文字溢...