CSS實現DIV超長截斷,並顯示...


DIV顯示內容有時會超長,並把頁面撐的很難看,

以前的做法是在JS中,或者后台判斷其長度,過長就截斷,

但由於中英文數字展示的寬度並不一樣,截斷的長度也就只能取最小值,

展示的效果也不好。利用CSS提供的方法,可以完美的解決該問題。

1 .project-Name{
2     width:280px; 
3     overflow:hidden; 
4     text-overflow:ellipsis;
5     white-space: nowrap;
6 }

這里寬度是必須定義的,

overflow:hidden;表示超長部分不顯示
text-overflow:ellipsis;表示超長顯示...
white-space: nowrap;表示不折行顯示

該樣式也可以應用於其他一些標簽,最好在可以加TITLE的標簽上使用,
因為可以加TITLE顯示全部的信息哦


免責聲明!

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



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