初阶：单行文本
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
本人菜鸟一只，有什么错误或者更好的方法欢迎指正哦
