用CSS解決中英文混合字符串的截取省略問題的解決辦法

2020-10-23 18:43:35

字體：大中小

來源：轉載

供稿：網友

作為一個程序員，經常需要面對的一個問題就是在新聞等信息的標題列表中，常常為了適應表格的寬度，需要對過長的標題文字的進行截取并在截取后的文字末端加上省略號。

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

　　隨著W3C的漸漸普及，許多網站都在進行著將傳統表格轉化為DIV+CSS的布局方式，我在研究CSS與DIV的一些特性時，發現了一個比較有趣的CSS，經過一系列的研究和實驗以后，發現了一個使用DIV+CSS實現這一功能的另類方法，此方法在我所能測試均無問題，并且良好的兼容于各種編碼及中英文混排的情況。

在Div中的方法：

<DIV STYLE="width: 200px;  border: 1px dashed red; overflow: hidden; text-overflow:ellipsis">  
<NOBR>就是比如有一行文字，很長，表格內一行顯示不下.</NOBR>  
<NOBR>就a是比如有一行文字，很長，表格內一行顯示不下.</NOBR>  
<NOBR>就1是比如有一行文字，很長，表格內一行顯示不下.</NOBR>  
<NOBR>就F是比如有一行文字，很長，表格內一行顯示不下.</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;">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</TD> 
</TR> 
</TABLE>

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

　　這個方法目前我還沒有發現任何bug，CSS控制，也不會造成太大的開銷，自我感覺，是一個有用的方法！

上一篇：很不錯的 CSS Hack 又學了一招

下一篇：教你如何用CSS來控制網頁字體的顯示樣式