前言：

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

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

目錄：

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

使用ellipsis.xml文件使Firefox支持文字溢出后點(diǎn)點(diǎn)點(diǎn)省略號(hào)表示

我自己想出來(lái)的方法——margin負(fù)值定位法

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

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

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

Firefox火狐瀏覽器下

可以看到，僅在Firefox火狐瀏覽器下無(wú)法實(shí)現(xiàn)文字溢出省略號(hào)表示，其文字直接從中間咔掉了。綜合考慮代碼成本，表現(xiàn)效果，我個(gè)人覺(jué)得這樣子已經(jīng)算是不錯(cuò)的了，追求完美和實(shí)際效益之間要追求一定的平衡。如果頁(yè)面上很多文字都溢出，則需要尋求更兼容的方法，要是偶爾會(huì)出現(xiàn)文字溢出的情況，就是用這類(lèi)css代碼就足夠了，單層標(biāo)簽，簡(jiǎn)單實(shí)用：

.zxx_text_overflow{

width:27em;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow:hidden;

}

2、使用ellipsis.xml文件使Firefox支持文字溢出后點(diǎn)點(diǎn)點(diǎn)省略號(hào)表示

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

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

需要注意的是：此XML文件不支持向上路徑的訪問(wèn)，也不支持絕對(duì)路徑的訪問(wèn)。也就是說(shuō)此XML文件需要放在調(diào)用文件(css文件，或HTML文件)的同目錄下或下一級(jí)目錄下，不能向上訪問(wèn)。原因我是不清楚的，我反復(fù)試驗(yàn)，都證明如此。

下圖為使用此XML文件后Firefox瀏覽器下的表現(xiàn)：

Firefox火狐瀏覽器下

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

.zxx_text_overflow{

width:27em;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-moz-binding:url('ellipsis.xml#ellipsis');

overflow:hidden;

}

例如在實(shí)例頁(yè)面中，此段css是寫(xiě)在頁(yè)面上的，所以ellipsis.xml文件是放在HTML文件同目錄下的。

3、我自己想出來(lái)的方法——margin負(fù)值定位法

這里先上代碼，HTML部分：

這是一段比較長(zhǎng)的文字，用來(lái)測(cè)試是否文字溢出時(shí)會(huì)用省略號(hào)顯示。…

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示例，Firefox和chrome以Firefox示例)：

IE6下，IE7同類(lèi)型，表現(xiàn)一致

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

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

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

簡(jiǎn)要說(shuō)明：此方法兼容IE6，IE7(IE8未測(cè)過(guò))，Firefox，chrome，Safari，opera瀏覽器。沒(méi)有hack，沒(méi)有生僻的css樣式。文字短時(shí)，沒(méi)有省略號(hào)，文字溢出時(shí)就出現(xiàn)省略號(hào)。可以說(shuō)是相當(dāng)不錯(cuò)的一個(gè)方法。原理也很簡(jiǎn)單：當(dāng)文字內(nèi)容足夠長(zhǎng)時(shí)就把隱藏在上面的省略號(hào)層給擠下來(lái)了。關(guān)鍵就是點(diǎn)點(diǎn)點(diǎn)所在div層的高度的絕對(duì)值要比其margin的絕對(duì)值大那么一點(diǎn)點(diǎn)。 如果您不習(xí)慣用em做單位，直接換作px就可以了，效果是一樣的。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。