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; 可實現所想要得到的溢出文本顯示省略號效果: