初階:單行文本
html
1 < div class ="test chn" > 2 這是一個中文例子,我是要成為攻城獅的人我是要成為攻城獅的人喲呵! 3 </ div > 4 < div class ="test eng" > 5 this is an english demo, my english is so poor that i just want to say hello world! 6 </ div >
css
.test { width : 300px ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; border : 5px solid #23bab5 ; margin : 30px auto ; }
效果圖
在最新版的ie 火狐?chrome 均是如此,據說早期的forefix會出現字被截斷的問題,但這個已經夠大部分瀏覽器用了
1.jpg)
1.jpg)
1.jpg)
1.jpg)
1.jpg)
1.jpg)
1.jpg)
多行折疊
jquery實現
?html
< div class ="test" > < p > 這是一個中文例子,我是要成為攻城獅的人我是要成為攻城獅的人喲呵!這是一個中文例子,我是要成為攻城獅的人我是要成為攻城獅的人喲呵!這是一個中文例子,我是要成為攻城獅的人我是要成為攻城獅的人喲呵!這是一個中文例子,我是要成為攻城獅的人我是要成為攻城獅的人喲呵! </ p > </ div >
CSS
.test { width : 300px ; overflow : hidden ; border : 5px solid #23bab5 ; margin : 30px auto ; height : 100px ; }
JQuery
$(document).ready(function() { var divHeight = $(".test").height(); //var divHeight = $(".test").css("height"); 如此返回帶px
while($(".test p").outerHeight()>divHeight){
$(".test p").text($(".test p").text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); //$(".test p").text($(".test p").text().substring(0,$(".test p").text().length - 1)); //一個一個字符串減少,最后再替換也ok } });
? ? 效果圖
注:其中的正則表達式參考了http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html,我自己寫的是一個個刪除直至小于divHeight,對正則表達式不太熟悉,以后抽出時間來學。
另外 ,第一次代碼二逼的寫成了這樣
var divHeight = $(".test" ).height(); var pHeight = $(".test p" ).outerHeight(); while (pHeight> divHeight){ $( ".test p").text($(".test p").text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..." )); }
想什么笨蛋,這是個死循環啊!
純css的方法目前還沒想到特別好的,有一篇折中的供大家參考,但感覺效果不是特別好
http://www.cocss.com/?p=1382
本人菜鳥一只,有什么錯誤或者更好的方法歡迎指正哦
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
