**
方案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 的 效果是 用 行内样式 加上的。
**
方案3
**
jQuery.dotdotdot.js 插件
https://github.com/FrDH/jQuery.dotdotdot
http://dotdotdot.frebsite.nl/ (官网)
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
