CSS3文本溢出顯示省略號


CCS3屬性之text-overflow:ellipsis;的用法和注意之處

語法:

text-overflow:clip | ellipsis

默認值:clip

適用於:所有元素

clip: 當對象內文本溢出時不顯示省略標記(...),而是將溢出的部分裁切掉。 
ellipsis: 當對象內文本溢出時顯示省略標記(...)。

更多參考:http://hovertree.com/h/bjaf/pr_text-overflow.htm

在使用的時候,有時候發現不會出現省略標記效果,經過測試發現,使用ellipsis的時候,必須配合overflow:hidden; white-space:nowrap; width:200px;這三個樣式共同使用才會有效果,示例代碼:

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:360px;}
</style>

<div class="test">歡迎光臨<a href="http://hovertree.com/">何問起</a>! hovertree.com css3實現文本溢出顯示省略號。<a href="http://hovertree.net/">Midi下載</a></div>

查看效果:http://hovertree.com/h/bjaf/1hg11eg4.htm

練習題:http://hovertree.com/tiku/bjaf/curs4a42.htm

web前端匯總:http://www.cnblogs.com/jihua/p/webfront.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM