Js與css實現文本溢出自動添加省略符號方法總結

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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檔案，看Firefox瀏覽器下是夠文字溢出省略符號表示。
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檔案，看Firefox瀏覽器下是夠文字溢出省略符號表示。
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檔案要在頁面的同一目錄下，或是下一級目錄下（我已測試），要是向上跨檔案夾訪問或絕對路徑訪問則失效。原因不詳！

js實現代碼

代碼如下

複製代碼

<title>Js文本溢出自動添加省略符號ellipsis-相容版</title>
<style type="text/css">
    * {margin:0;padding:0;font-size:12px;}
    #div{width:200px;height:200px;}
    #div2{width:300px;height:200px;}
    .ellipsis {border:1px solid red;font-size:12px;line-height:25px;word-wrap:break-word;}
    </style>
    <script type="text/javascript">
    function formatEllipsis(){
           var arr=[];
           var aDiv=document.getElementsByTagName("*");
           for(var i=0;i<aDiv.length;i++){
                   if(aDiv[i].className=="ellipsis"){
                           arr.push(aDiv[i]);
                   }
           }
           for(var i=0;i<arr.length;i++){
                   new ellipsis(arr[i]);
           }
    }
    function ellipsis(obj){
           this.obj=obj;
           this._style=[];
           this._width=getStyle(this.obj,"width");
           this._height=getStyle(this.obj,"height");
           this._fontSize=getStyle(this.obj,"fontSize");
           this._lineHeight=getStyle(this.obj,"lineHeight");
           var limit=this.format();
           //alert(limit);
           var _html=obj.innerHTML;
           obj.innerHTML=_html.substring(0,limit)+"...";
    }
    ellipsis.prototype.format=function(){
           var _html=this.obj.innerHTML;
           var _len=_html.length;
           var _lines=Math.floor(this._width/this._lineHeight);
           var _cols=Math.floor(this._width/this._fontSize);
           return _lines*_cols-3;
    }
    function getStyle(e,p){
           var s= e.currentStyle ? e.currentStyle[p] : document.defaultView.getComputedStyle(e,null)[p];
           return parseInt(s);
    }
    window.onload=function(){
           formatEllipsis();
    }
    </script>
    </head>
    <body>
    <div id="div" class="ellipsis">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
    <div id="div2" class="ellipsis">nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
</body>
</html>

css文本溢出自動添加省略符號

1.相容 IE6 / IE7 /FireFox
2.文字物件:table裡的文本，不能換行
3.如果採用js截取，支援resize,並保證頁面執行效率
4.確保firefox下省略符號的出現

代碼如下

複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文字截取</title>
<style type="text/css">
body{font-size:13px;color:#8c966b;}
div{clear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;}
div a{color:#8c966b;text-decoration:none;}
div a:hover{text-decoration:underline;}
div a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow:ellipsis; /* for IE */
}
div:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */
</style>
</head>
<body>
<div><a href="">用css來實現自動截取文字，不需要背景程式和JS的使用</a></div>
<div><a href="">好處是：有利於內容完整性，有利於SEO，無需背景程式處理，可以在前台隨時調節要截取的長度。</a></div>
<div><a href="">不好的地方：不能自動判斷截取長度，當字元很短的時候在Firefox中也會產生後面的省略符號。</a></div>
<div><a href="">另外在設定截取寬度的時候，要注意，盡量讓文字截取完整</a></div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More