用CSS解決中英文混合字符串的截取省略問題的解決辦法
更新時(shí)間:2007年02月27日 00:00:00 作者:
作為一個(gè)程序員,經(jīng)常需要面對(duì)的一個(gè)問題就是在新聞等信息的標(biāo)題列表中,常常為了適應(yīng)表格的寬度,需要對(duì)過長的標(biāo)題文字的進(jìn)行截取并在截取后的文字末端加上省略號(hào)。
眾所周知,有很多方法可以實(shí)現(xiàn)這個(gè)功能,JavaScript,ASP,PHP都有各自的實(shí)現(xiàn)方法,但是面臨的問題有很多,比如中英文混雜時(shí)或在某些編碼下,容易造成截取出現(xiàn)亂碼的問題,雖然大多數(shù)問題已經(jīng)有比較成熟的解決方案,但在數(shù)據(jù)量比較大時(shí),使用JavaScript,ASP,PHP實(shí)現(xiàn)這一功能,無疑會(huì)給客戶端或服務(wù)器端造成比較大的資源開銷。
隨著W3C的漸漸普及,許多網(wǎng)站都在進(jìn)行著將傳統(tǒng)表格轉(zhuǎn)化為DIV+CSS的布局方式,我在研究CSS與DIV的一些特性時(shí),發(fā)現(xiàn)了一個(gè)比較有趣的CSS,經(jīng)過一系列的研究和實(shí)驗(yàn)以后,發(fā)現(xiàn)了一個(gè)使用DIV+CSS實(shí)現(xiàn)這一功能的另類方法,此方法在我所能測試均無問題,并且良好的兼容于各種編碼及中英文混排的情況。
眾所周知,有很多方法可以實(shí)現(xiàn)這個(gè)功能,JavaScript,ASP,PHP都有各自的實(shí)現(xiàn)方法,但是面臨的問題有很多,比如中英文混雜時(shí)或在某些編碼下,容易造成截取出現(xiàn)亂碼的問題,雖然大多數(shù)問題已經(jīng)有比較成熟的解決方案,但在數(shù)據(jù)量比較大時(shí),使用JavaScript,ASP,PHP實(shí)現(xiàn)這一功能,無疑會(huì)給客戶端或服務(wù)器端造成比較大的資源開銷。
隨著W3C的漸漸普及,許多網(wǎng)站都在進(jìn)行著將傳統(tǒng)表格轉(zhuǎn)化為DIV+CSS的布局方式,我在研究CSS與DIV的一些特性時(shí),發(fā)現(xiàn)了一個(gè)比較有趣的CSS,經(jīng)過一系列的研究和實(shí)驗(yàn)以后,發(fā)現(xiàn)了一個(gè)使用DIV+CSS實(shí)現(xiàn)這一功能的另類方法,此方法在我所能測試均無問題,并且良好的兼容于各種編碼及中英文混排的情況。
在Div中的方法:
<DIV STYLE="width: 200px; border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就a是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就1是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就F是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>
</DIV>
<NOBR>就是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就a是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就1是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就F是比如有一行文字,很長,表格內(nèi)一行顯示不下.</NOBR>
<NOBR>就是 Like You Pig Very Very Very Much.</NOBR>
</DIV>
在Table中的方法:
<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</TD>
</TR>
</TABLE>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</TD>
</TR>
</TABLE>
代碼很簡單,基本上應(yīng)該很容易就可以看明白,主要在于“text-overflow”這個(gè)屬性,此屬性有2個(gè)值,分別是“ellipsis”和“clip”,簡單的理解,第一個(gè)值會(huì)在截取之后在文字末端加上省略號(hào),第二個(gè)值則不會(huì)。
這個(gè)方法目前我還沒有發(fā)現(xiàn)任何bug,CSS控制,也不會(huì)造成太大的開銷,自我感覺,是一個(gè)有用的方法!
相關(guān)文章
CSS實(shí)現(xiàn)每行新聞數(shù)量不等效果代碼
像大型網(wǎng)站中間那部分的效果:由于文章的標(biāo)題的長度不一樣,會(huì)自動(dòng)實(shí)現(xiàn)行滿后下一個(gè)標(biāo)題自動(dòng)換行,不滿,則在后面繼續(xù)添加。2008-10-10

