**

方案1

**

無省略號的多行折疊

//先獲得原始高度,animate height:auto 無效，不可以
$(function(){
            var $obj = $('#aa');   
            var currentHeight = $obj.css("height");
            $obj.css("height","auto");
            var animateHeight = $obj.css("height");
            $obj.css("height", currentHeight);
            $('#click').click(function(){
                
                if($('#aa').css('height') == currentHeight){
                    $('#aa').animate({height:animateHeight});
                    $('#aa').removeClass('active');
                }else{
                    $('#aa').animate({height:currentHeight});
                    $('#aa').addClass('active');
                }
            })
        })
.active:after{
    position:absolute;........
}

此方法不能用-webkit-line-clamp 方法。
如果一定要加省略號：
用絕對定位，省略號右下角定位，同時控制class的隱藏

缺點： 字可能會顯示一半

字體被遮擋一半.png

**

方案2

**
同方案1
.active 不同

樣式
.active{  display:-webkit-box;  overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2;-webkit-box-orient:vertical;}
js部分
var $obj = $('#aa'); 
$obj.removeClass('active');  
var currentHeight = $obj.css("height");
$obj.css("height","auto");
var animateHeight = $obj.css("height");
$obj.css("height", currentHeight);
obj.addClass('active');

缺點：僅支持webkit（在webkit下才有省略號）,firefox etc 等無省略號

animate 的 效果是 用 行內(nèi)樣式 加上的。

**

方案3

**

jQuery.dotdotdot.js 插件
https://github.com/FrDH/jQuery.dotdotdot
http://dotdotdot.frebsite.nl/ (官網(wǎng))

function() {
        var t = e("#xmpl-3");
        t.dotdotdot({
            keep: ".toggle"
        });
        var n = t.data("dotdotdot");
        t.on("click", ".toggle", function(e) {
            e.preventDefault(),
            t.hasClass("ddd-truncated") ? (n.restore(),
            t.addClass("full-story")) : (t.removeClass("full-story"),
            n.truncate(),
            n.watch())
        })
    }(),

點擊前.png

點擊后.png

中間截斷

function() {
        e("#xmpl-2").find("li").each(function() {
            var t = e(this);
            t.html("<span>" + t.html().split("/").join("</span><span>/") + "</span>"),
            t.children().last().addClass("file"),
            e(this).dotdotdot({
                ellipsis: "/…",
                keep: ".file"
            })
        })
    }(),

中間省略號.png

**

方案4

**
clamp.js 插件
https://github.com/josephschmitt/Clamp.js