解決|字串 ylog.net首頁裡有最新日記和最新評論兩項,日記的標題和評論的內容經常超出長度而自動換行,只能用難看兩字形容,這讓我頭痛不已...
首先想到的是截取一段,於是寫了這個函數
這種操作用js,在用戶端執行可以緩解伺服器負擔,而且js在操作字串時有速度優勢
<script>
CatString(str,len)
{
if (str.length>len)
str=str.substring(0,len-3,str)+"...";
document.write (str)
}
</script>
結果可想而知,因為英文和中文的列印長度不同,得到的結果是長短不齊,顯然不是我要的效果
既然中文的寬度大約為兩倍的英文寬度,那就把中文當成兩個英文字元了,然後再截取出來,再還原#@$#@%$#!$#
代碼我就不貼了,N長而且複雜,最要命的是在普通字型裡英文字元的寬度並不全相同象M與f就相差甚遠
鬱悶半天,翻看CSS2.0手冊裡布局部分,發現有個屬性叫overflow,原文如下
overflow : visible | auto | hidden | scroll
參數：
visible : 不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的大小。並且clip屬性設定將失效
auto : 此為body對象和textarea的預設值。在需要時剪下內容並添加捲軸
hidden : 不顯示超過對象尺寸的內容
scroll : 總是顯示捲軸
說明：
檢索或設定當對象的內容超過其指定高度及寬度時如何管理內容。
設定textarea對象為hidden值將隱藏其捲軸。
對於table來說，假如table-layout屬性設定為fixed，則td對象支援帶有預設值為hidden的overflow屬性。如果設為hidden，scroll或者auto，那麼超出td尺寸的內容將被剪下。如果設為visible，將導致額外的文本溢出到右邊或左邊（視direction屬性設定而定）的儲存格。
自IE5開始，此屬性在MAC平台上可用。
對應的指令碼特性為overflow。請參閱我編寫的其他書目。
還有一個屬性就是text-overflow這屬性設為ellipsis時,會自動加省略符號, 但只IE6支援
看來問題解決了,根據上面的屬性很容易就能寫出下面的代碼....
大家可以拷貝到記事本裡儲存成htm檔案測試....
<span style="width:160px;height:15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap">測試字串
的所處位置沒測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試長度寬度</span>
再加一個title當滑鼠移上去時把全文顯示出來就prefect了,樣本見www.ylog.net的首頁
CSS2.0中文手冊可以在此下載http://www.ylog.net/download.asp?cat_id=7
