前言：

在實際的項目中，由于文字內容的長度不確定性和頁面布局的固定性，難免會出現文字內容超過div(或其他標簽，下同)區域的情況，此時比較好的做法就是當文字超過限定的div寬度后自動以省略號(…)顯示，這樣，按照習慣，人們都會知道這兒有文字被省略了。css中有個屬性叫做 text-overflow:ellipsis; 配合其他一些屬性可以實現IE,chrome,safria瀏覽器下文字溢出點點點省略號顯示，在加上opera瀏覽器的私有屬性 -o-text-overflow:ellipsis; 就目前而言，可以實現Firefox瀏覽器以外的所有主流瀏覽器的文字溢出點點點省略號顯示。

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

目錄：

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

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

我自己想出來的方法——margin負值定位法

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

下圖為此常用方法在各個瀏覽器下的表現：

在IE6瀏覽器下、IE7瀏覽器下、chrome谷歌瀏覽器下、Safari瀏覽器下、opera瀏覽器下

Firefox火狐瀏覽器下

可以看到，僅在Firefox火狐瀏覽器下無法實現文字溢出省略號表示，其文字直接從中間咔掉了。綜合考慮代碼成本，表現效果，我個人覺得這樣子已經算是不錯的了，追求完美和實際效益之間要追求一定的平衡。如果頁面上很多文字都溢出，則需要尋求更兼容的方法，要是偶爾會出現文字溢出的情況，就是用這類css代碼就足夠了，單層標簽，簡單實用：

.zxx_text_overflow{

width:27em;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow:hidden;

}

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

這是老外提供的一種方法，使用Firefox的私有屬性調用一個XML文件，可以使Firefox火狐瀏覽器下文字溢出后以省略號的形式顯示。右鍵另存為下載：ellipsis.xml

調用方法如下： -moz-binding:url(‘ellipsis.xml#ellipsis’); 跟css樣式寫法一致。

需要注意的是：此XML文件不支持向上路徑的訪問，也不支持絕對路徑的訪問。也就是說此XML文件需要放在調用文件(css文件，或HTML文件)的同目錄下或下一級目錄下，不能向上訪問。原因我是不清楚的，我反復試驗，都證明如此。

下圖為使用此XML文件后Firefox瀏覽器下的表現：

Firefox火狐瀏覽器下

可以清楚地看到溢出的文字部分用點點點省略號表示了。再結合上面的css樣式，就可以實現所有主流瀏覽器下的單行文字溢出用省略號表示了。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部分：

這是一段比較長的文字，用來測試是否文字溢出時會用省略號顯示。…

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;}

結果在不同瀏覽器下的表現如下(IE6，IE7以IE6示例，Firefox和chrome以Firefox示例)：

IE6下，IE7同類型，表現一致

Firefox瀏覽器下表現

opera瀏覽器下表現

Safari瀏覽器下表現

簡要說明：此方法兼容IE6，IE7(IE8未測過)，Firefox，chrome，Safari，opera瀏覽器。沒有hack，沒有生僻的css樣式。文字短時，沒有省略號，文字溢出時就出現省略號。可以說是相當不錯的一個方法。原理也很簡單：當文字內容足夠長時就把隱藏在上面的省略號層給擠下來了。關鍵就是點點點所在div層的高度的絕對值要比其margin的絕對值大那么一點點。 如果您不習慣用em做單位，直接換作px就可以了，效果是一樣的。

總結

以上是生活随笔為你收集整理的html文字溢出用省列号,关于文字内容溢出用点点点(...)省略号表示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。