初階：單行文本
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)
多行折疊
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元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
