单行或多行文本折行用省略号表示

初阶：单行文本

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会出现字被截断的问题，但这个已经够大部分浏览器用了

多行折叠

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

本人菜鸟一只，有什么错误或者更好的方法欢迎指正哦