[轉]關於文字內容溢出用點點點(...)省略符號表示

標籤：style   blog   http   color   io   os   使用   ar   strong   

1.常規css方法——可以實現IE，Safari，chrome，opera瀏覽器下文字溢出省略符號表示這是一段測試文字，主要是用來測試文字溢出後是否會用…

.zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

 

2.使用ellipsis.xml檔案使Firefox支援文字溢出後點點點省略符號表示這段代碼調用了跨檔案夾路徑的ellipsis.xml檔案，看Firef…

ps: 在Firefox下上面div內容顯示空白，此div內容是：“這段代碼添加了跨檔案夾路徑的ellipsis.xml檔案，看Firefox瀏覽器下是夠文字溢出省略符號表示”。

.zxx_text_overflow_2{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url(‘../xml/ellipsis.xml#ellipsis‘); overflow:hidden;}

 

這段代碼調用了同檔案夾路徑的ellipsis.xml檔案，看Firef…

ps: 在Firefox下上面div文字溢出省略符號顯示，此div內容是“這段代碼調用了同檔案夾路徑的ellipsis.xml檔案，看Firefox瀏覽器下是夠文字溢出省略符號表示”。至此，幾乎所有主流瀏覽器都實現文字溢出省略符號表示。

.zxx_text_overflow_3{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url(‘ellipsis.xml#ellipsis‘); overflow:hidden;}

 

這裡有個小結論：這個使Firefox瀏覽器下文字溢出省略符號表示的ellipsis.xml檔案要在頁面的同一目錄下，或是下一級目錄下（我已測試），要是向上跨檔案夾訪問或絕對路徑訪問則失效。原因不詳！

3.使用:after偽類和content實現文字溢出後省略符號表示（嚴重不推薦！直接跳過）

憤慨：我實在忍不住了，我要臭罵一通。我很久之前就自己試過content實現後面的省略符號表示，發現問題很多，遂想了其他方法。

今天我本想找以前一位兄弟使用圖片實作類別似效果的方法，發現網上突然出現了標題“為相容IE,FF文字溢出省略符號顯示的文章”，其實就一篇，很多我很鄙視的教程網站都有（正好打上了熱門關鍵字啊）。

我原本試試介紹這個方法的，但是我實在做不下去了！這個方法根本不行，一點都不行！要是N年前，只有IE6和Firefox瀏覽器的時候，這個方法或許可以試試。現在根本不行，在現在看來，寫文章的人就是個大草包，要麼是個史前時代過來的程式員，文章裡面錯誤一大堆，用胡說八道形容一點都不為過，很多東西根本沒有經過驗證就那兒大放厥詞。1、說是相容，其實反而大大破壞了相容性，IE6和IE7下的表現就不一樣，一句IE“不支援max-width”就讓我想給作者扇個耳光，IE7不支援嗎，別告訴我你寫這文章時還沒有IE7瀏覽器。2、本來chrome瀏覽器，Safari還有opera可以實現文字溢出省略符號顯示的，現在受限與:after和content，就會一處理不當，文字直接被截，就很醜了。3、多套用了一層標籤，css也多了好幾行，沒有必要，資源消耗高。4、當文字很短時後面也還跟著個省略符號，沒有溢出為什麼還要顯示省略符號呢？

總之，結論就是這個方法一點點實用價值都沒有。所以嚴重不推薦！

4.我自己想出來的方法：margin負值定位法——相容所有主流瀏覽器這是一個比較短的文字。這是一段比較長的文字，用來測試是否文字溢…

HTML部分： 
<div class="zxx_text_overflow_4"> <div class="text_con">這是一段比較長的文字，用來測試是否文字溢出時會用省略符號顯示。</div> <div class="text_dotted">…</div> </div>
CSS部分： 
.zxx_text_overflow_4{width:24em; height:1.3em; overflow:hidden; zoom:1;} 
.zxx_text_overflow_4 .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;} 
.zxx_text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}

 

簡要說明：此方法相容IE6，IE7，IE8，Firefox，chrome，Safari，opera瀏覽器。沒有hack，沒有生僻的css樣式。文字短時，沒有省略符號，文字溢出時就出現省略符號。可以說是相當不錯的一個方法。原理也很簡單：當文字內容足夠長時就把隱藏在上面的省略符號層給擠下來了。關鍵就是點點點所在div層的高度的絕對值要比其margin的絕對值大那麼一點點。

5.jQuery限制字元字數的方法我的文字個數較少，不要殺我！你個殺千刀的，怎麼寫了這麼多的文字，我要被攔腰...

HTML部分： <div class="zxx_text_overflow_5">你個殺千刀的，怎麼寫了這麼多的文字，我要被攔腰截斷了啊，天啊！</div>沒有css啦，只有js代碼： $(document).ready(function(){ //限制字元個數 
  $(".zxx_text_overflow_5").each(function(){ 
    var maxwidth=23; 
    if($(this).text().length>maxwidth){ 
      $(this).text($(this).text().substring(0,maxwidth)); 
      $(this).html($(this).html()+‘...‘); 
    } 
  }); 
});

 

6.jQuery自動判斷寬度是否超出的方法我的文字個數較少，不要殺我！你個殺千刀的，怎麼寫了這麼多的文字，我要被攔腰截斷...

HTML部分： <div class="zxx_text_overflow_6">你個殺千刀的，怎麼寫了這麼多的文字，我要被攔腰截斷了啊，kitty救我！</div>css部分： .zxx_text_overflow_6{width:400px;}js部分： var wordLimit=function(){   $(".zxx_text_overflow_6").each(function(){     var copyThis = $(this.cloneNode(true)).hide().css({ ‘position‘: ‘absolute‘, ‘width‘: ‘auto‘, ‘overflow‘: ‘visible‘ });     $(this).after(copyThis);     if(copyThis.width()>$(this).width()){ 
      $(this).text($(this).text().substring(0,$(this).html().length-4)); 
      $(this).html($(this).html()+‘...‘); 
      copyThis.remove(); 
      wordLimit(); 
    }else{ 
      copyThis.remove(); //清除複製 return; 
    }
  }); 
} 
wordLimit();

 

兩個jQuery方法都是自己寫的，不算太難。前者直接限定字元個數，後者通過寬度判斷，去掉最後一個字元，迴圈，直到文字內容寬度小於div的限制寬度。

 

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=230

[轉]關於文字內容溢出用點點點(...)省略符號表示