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 屬性
新聞熱點
疑難解答