作為一個(gè)程序員，經(jīng)常需要面對(duì)的一個(gè)問(wèn)題就是在新聞等信息的標(biāo)題列表中，常常為了適應(yīng)表格的寬度，需要對(duì)過(guò)長(zhǎng)的標(biāo)題文字的進(jìn)行截取并在截取后的文字末端加上省略號(hào)。

　　眾所周知，有很多方法可以實(shí)現(xiàn)這個(gè)功能，JavaScript，ASP，PHP都有各自的實(shí)現(xiàn)方法，但是面臨的問(wèn)題有很多，比如中英文混雜時(shí)或在某些編碼下，容易造成截取出現(xiàn)亂碼的問(wèn)題，雖然大多數(shù)問(wèn)題已經(jīng)有比較成熟的解決方案，但在數(shù)據(jù)量比較大時(shí)，使用JavaScript，ASP，PHP實(shí)現(xiàn)這一功能，無(wú)疑會(huì)給客戶端或服務(wù)器端造成比較大的資源開(kāi)銷。

　　隨著W3C的漸漸普及，許多網(wǎng)站都在進(jìn)行著將傳統(tǒng)表格轉(zhuǎn)化為DIV+CSS的布局方式，我在研究CSS與DIV的一些特性時(shí)，發(fā)現(xiàn)了一個(gè)比較有趣的CSS，經(jīng)過(guò)一系列的研究和實(shí)驗(yàn)以后，發(fā)現(xiàn)了一個(gè)使用DIV+CSS實(shí)現(xiàn)這一功能的另類方法，此方法在我所能測(cè)試均無(wú)問(wèn)題，并且良好的兼容于各種編碼及中英文混排的情況。

在Div中的方法：

<DIV STYLE="width: 200px;  border: 1px dashed red; overflow: hidden; text-overflow:ellipsis"> 
<NOBR>就是比如有一行文字，很長(zhǎng)，表格內(nèi)一行顯示不下.</NOBR> 
<NOBR>就a是比如有一行文字，很長(zhǎng)，表格內(nèi)一行顯示不下.</NOBR> 
<NOBR>就1是比如有一行文字，很長(zhǎng)，表格內(nèi)一行顯示不下.</NOBR> 
<NOBR>就F是比如有一行文字，很長(zhǎng)，表格內(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>

　　代碼很簡(jiǎn)單，基本上應(yīng)該很容易就可以看明白，主要在于“text-overflow”這個(gè)屬性，此屬性有2個(gè)值，分別是“ellipsis”和“clip”，簡(jiǎn)單的理解，第一個(gè)值會(huì)在截取之后在文字末端加上省略號(hào)，第二個(gè)值則不會(huì)。

　　這個(gè)方法目前我還沒(méi)有發(fā)現(xiàn)任何bug，CSS控制，也不會(huì)造成太大的開(kāi)銷，自我感覺(jué)，是一個(gè)有用的方法！

最新評(píng)論