美文网首页
最大三行,多出出省略 ...

最大三行,多出出省略 ...

作者: 布鲁斯李l | 来源:发表于2020-01-16 17:22 被阅读0次
//知识点样式修改
(function($){
var htmlStr = $(".zxx_text_overflow_3").html();
$.fn.wordLimit = function(num){
    this.each(function(){
        if (!num){
            var copyThis = $(this.cloneNode(true)).hide().css({
                'position': 'absolute',
                'width' : 'auto',
                'overflow' : 'visible'
            });
            $(this).after(copyThis);
            if (copyThis.width() > $(this).width()){
                $(this).text($(this).text().substring(0, $(this).text().length - 4));
                $(this).html($(this).html() + '...');
                copyThis.remove();
                $(this).wordLimit();
            }
            else{
                copyThis.remove(); //清除复制
                return;
            }
        }
        else{
            var maxwidth = num;
            if ($(this).text().length > maxwidth){
                $(this).text($(this).text().substring(0, maxwidth));
                $(this).html($(this).html() + '...');
            }
        }
    });
}

var widthWin2 = $(".zxx_text_overflow_3").width();
var widthZhi1 = Math.ceil(widthWin2 / 12);
$(".zxx_text_overflow_3").wordLimit(widthZhi1 * 3)
    $(window).resize(function() {
    $(".zxx_text_overflow_3").html(htmlStr);
    var widthWin = $(".zxx_text_overflow_3").width();
    var widthZhi = Math.ceil(widthWin / 12);
    $(".zxx_text_overflow_3").wordLimit(widthZhi * 3);

    });
})(jQuery);

相关文章

网友评论

      本文标题:最大三行,多出出省略 ...

      本文链接:https://www.haomeiwen.com/subject/yjtqzctx.html