把字串放到規定的範圍內,超出的部分自動變為...完美解決

來源:互聯網
上載者:User
解決|字串 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



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。