首页手记多行部分折叠显示省略号

多行部分折叠显示省略号

标签：

Html/CSS JavaScript

方案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的隐藏

缺点：字可能会显示一半

方案2

**
同方案1
.active 不同

.active{  display:-webkit-box;  overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2;-webkit-box-orient:vertical;}
            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())
        })
    }(),

中间截断

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"
            })
        })
    }(),