css控制標題長度超出部分顯示省略號


width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis;


設置或檢索是否使用一個省略標記(...)標示對象內文本的溢出。 

對應的腳本特性爲text-Overflow。

---------------------------------------------------------------------------------

語法:   text-overflow : clip | ellipsis  

參數:   

    clip : 不顯示省略標記(...),而是簡單的裁切   

    ellipsis : 當對象內文本溢出時顯示省略標記(...)   

text-overflow屬性僅是註解,當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義:強制文本在一行內顯示(white-space:nowrap)及溢出內容爲隱藏(overflow:hidden)。只有這樣才能實現溢出文本顯示省略號的效果。   

--------------------------------------------------------------------------------

語法: 
overflow : visible | auto | hidden | scroll 
取值: 
visible :  默認值。不剪切內容也不添加滾動條。假如顯式聲明此默認值,對象將以包含對象的 window 或 frame 的尺寸裁切。並且 clip 屬性設置將失效 
auto :  在必需時對象內容纔會被裁切或顯示滾動條 
hidden :  不顯示超過對象尺寸的內容 
scroll :  總是顯示滾動條 

一、僅定義text-overflow:ellipsis; 不能實現省略號效果。   

二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實現省略號效果   

三、同時應用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可實現所想要得到的溢出文本顯示省略號效果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章