前言：

在實際的項目中，由于文字內(nèi)容的長度不確定性和頁面布局的固定性肪笋，難免會出現(xiàn)文字內(nèi)容超過div（或其他標(biāo)簽犬庇，下同）區(qū)域的情況思劳，此時比較好的做法就是當(dāng)文字超過限定的div寬度后自動以省略號（…）顯示馍忽，這樣棒坏，按照習(xí)慣燕差，人們都會知道這兒有文字被省略了。css中有個屬性叫做 text-overflow:ellipsis; 配合其他一些屬性可以實現(xiàn)IE,chrome,safria瀏覽器下文字溢出點點點省略號顯示坝冕，在加上opera瀏覽器的私有屬性 -o-text-overflow:ellipsis; 就目前而言徒探，可以實現(xiàn)Firefox瀏覽器以外的所有主流瀏覽器的文字溢出點點點省略號顯示。

而本文將提供多種兼容性上佳的文字溢出點點點省略號顯示的方法喂窟，而里面不少方法就是自己想出來的刹帕。有使用外部輔助文件的，有純粹的css方法的谎替，還有使用jQuery方法的。每種方法都提供各個瀏覽器下的截圖驗證蹋辅，提供實例頁面钱贯，提供部分源文件，都是值得信賴的方法侦另，希望對您有所幫助秩命。文章中穿插了些牢騷，您可以跳過褒傅，與本文主體不是很相關(guān)弃锐。

目錄：

1. 常規(guī)css方法——使Firefox以外主流瀏覽器文字溢出省略號表示
2. 使用ellipsis.xml文件使Firefox支持文字溢出后點點點省略號表示
3. 我自己想出來的方法——margin負值定位法

1、常規(guī)css方法——使Firefox以外主流瀏覽器文字溢出省略號表示

下圖為此常用方法在各個瀏覽器下的表現(xiàn)：

在IE6瀏覽器下殿托、IE7瀏覽器下霹菊、chrome谷歌瀏覽器下、Safari瀏覽器下支竹、opera瀏覽器下

Firefox火狐瀏覽器下

可以看到旋廷，僅在Firefox火狐瀏覽器下無法實現(xiàn)文字溢出省略號表示，其文字直接從中間咔掉了礼搁。綜合考慮代碼成本饶碘，表現(xiàn)效果，我個人覺得這樣子已經(jīng)算是不錯的了馒吴，追求完美和實際效益之間要追求一定的平衡扎运。如果頁面上很多文字都溢出，則需要尋求更兼容的方法饮戳，要是偶爾會出現(xiàn)文字溢出的情況豪治，就是用這類css代碼就足夠了，單層標(biāo)簽莹捡，簡單實用：

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

2鬼吵、使用ellipsis.xml文件使Firefox支持文字溢出后點點點省略號表示

這是老外提供的一種方法，使用Firefox的私有屬性調(diào)用一個XML文件篮赢，可以使Firefox火狐瀏覽器下文字溢出后以省略號的形式顯示齿椅。右鍵另存為下載：ellipsis.xml
　　調(diào)用方法如下： -moz-binding:url(‘ellipsis.xml#ellipsis’); 跟css樣式寫法一致琉挖。
　　需要注意的是：此XML文件不支持向上路徑的訪問，也不支持絕對路徑的訪問涣脚。也就是說此XML文件需要放在調(diào)用文件（css文件示辈，或HTML文件）的同目錄下或下一級目錄下，不能向上訪問遣蚀。原因我是不清楚的矾麻，我反復(fù)試驗，都證明如此芭梯。
下圖為使用此XML文件后Firefox瀏覽器下的表現(xiàn)：

Firefox火狐瀏覽器下

可以清楚地看到溢出的文字部分用點點點省略號表示了险耀。再結(jié)合上面的css樣式，就可以實現(xiàn)所有主流瀏覽器下的單行文字溢出用省略號表示了玖喘。css表示如下：

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

例如在實例頁面中甩牺，此段css是寫在頁面上的，所以ellipsis.xml文件是放在HTML文件同目錄下的累奈。

3贬派、我自己想出來的方法——margin負值定位法

這里先上代碼，HTML部分：

<div class="zxx_text_overflow" >
     <div class="zxx_con" >這是一段比較長的文字澎媒，用來測試是否文字溢出時會用省略號顯示搞乏。</div>
     <div class="zxx_dotted" >…</div>
 </div>

css部分：

.zxx_text_overflow{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}

結(jié)果在不同瀏覽器下的表現(xiàn)如下（IE6，IE7以IE6示例戒努，F(xiàn)irefox和chrome以Firefox示例）：

IE6下请敦，IE7同類型，表現(xiàn)一致

Firefox瀏覽器下表現(xiàn)

Safari瀏覽器下表現(xiàn)