用css控制標題字元溢出,用省略符號表示

 css控制文章列表,讓標題溢出的文字以省略符號方式表現.
<div style="width:300px; height:22px;line-height:22px; white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">測試一下效果看能不能達到只逼供逼供逼供逼供珍貴逼供蚶見多識廣薯在時工楞革革工進而杳碴國圓頂 </div>

用上面這段代碼就可以實現,但如果要實現效果就得結合多個css的定義才能實現..
下面我們來看一下裡面的每個css的定義:

text-overflow : clip | ellipsis
取值：
clip :　 預設值。不顯示省略標記(...)，而是簡單的裁切
ellipsis :　 當對象內文本溢出時顯示省略標記(...)

說明：
設定或檢索是否使用一個省略標記(...)標示對象內文本的溢出。
這個屬性僅僅作用於水平內聯方向的，普通的西方文本的溢出。內聯溢出發生在行內的文本超出可用寬度卻沒有換行機會的時候。
要強制溢出發生並且應用 ellipsis 值，作者必須設定對象的 white-space 屬性值為 nowrap 。
假如沒有換行機會(例如，對象容器的寬度是狹窄的，而內有很長的沒有合理斷行的文本)，沒有應用 nowrap 也有可能溢出。
為了使 ellipsis 值被應用，此屬性必須被設定到具有不可視地區的對象。最好的選擇是設定 overflow 屬性為 hidden 。設定 overflow 屬性為 scroll 或者 auto 時，此屬性也會應用。但是會有捲軸出現。
通過選擇省略標記，隱藏的文本可以被選擇。當選擇發生時，省略標記會隱藏而被文本替換。
此屬性為在DHTML中製作省略標記提供了高效的方法。
此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
對應的指令碼特性為 textOverflow 。
<----------------------------------------------------------------------------------------------------------------------->
看到上面這段文字提到的另外兩個屬性都用紅色表示了,這個屬性值只是對應西方文本而設定的...

white-space版本：CSS1　 相容性：IE5.5+ NS4+　繼承性：有
文法：
white-space : normal | pre | nowrap 取值：
normal :　 預設值。預設處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行
pre :　 換行和其他空白字元都將受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支援。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同於 normal 。參閱 pre 對象
nowrap :　 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性

說明：
設定或檢索對象內空白字元的處理方式。
空白字元，像換行，空格，TAB，在HTML文檔中預設的是被忽略的。當此屬性設定為 normal 或者 nowrap 時，你可以使用不換行空格的具名實體 來添加空格，用 br 元素來添加換行。此屬性對你使用文件物件模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
此屬性作用於塊對象。此屬性對於 currentStyle 對象而言是唯讀。對於其他對象而言是可讀寫的。
對應的指令碼特性為 whiteSpace 。

overflow版本：CSS2　 相容性：IE4+ NS6+　繼承性：無
文法：
overflow : visible | auto | hidden | scroll
取值：
visible :　 預設值。不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將以包含對象的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效
auto :　 在必需時對象內容才會被裁切或顯示捲軸
hidden :　 不顯示超過對象尺寸的內容
scroll :　 總是顯示捲軸

說明：
檢索或設定當對象的內容超過其指定高度及寬度時如何管理內容。
所有對象的預設值是 visible ，除了 textarea 對象和 body 對象的預設值是 auto 。設定 textarea 對象此屬性值為 hidden 將隱藏其捲軸。
對於 table 來說，假如 table-layout 屬性設定為 fixed ，則 td 對象支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ，那麼超出 td 尺寸的內容將被剪下。如果設為 visible ，將導致額外的文本溢出到右邊或左邊（視 direction 屬性設定而定）的儲存格。
自IE5開始，此屬性在MAC平台上可用。
自IE6開始，當你使用 !DOCTYPE 聲明指定了 standards-compliant 模式，此屬性可以應用於 html 對象。
對應的指令碼特性為 overflow 。

上面的問題解決後.但在包含有連結的調用當中.卻沒有效果.認真看了代碼後發現在.如果在div裡的是A的屬性就會失效...
既然這樣那就把定義在li上面的值放到A上面來...結果就可以了....

最後的代碼如下:
<style type="text/css">
ul,li{padding:0; margin:0; list-style:none;}
li{width:95%;margin:0 auto; height:22px;line-height:22px; }
li a{white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display:block; width:100%;}
< /style>

< div style="width:300px; padding:5px;">
< ul>

< li><a href="#">這是假字這是假字這是假字這是假字這是假字</a></li>
< li><a href="#">這是假字這是假字這是假字這是假字這是假字</a></li>
< li><a href="#">這是假字這是假字這是假字這是假字這是假字</a></li>
< li><a href="#">這是假字這是假字這是假字這是假字這是假字</a></li>
< /ul>
< /div>