Question

我需要能够将此插件与“max-height”css一起使用，现在它仅在我定义一定高度时才有效，但如果它具有最大高度则不行。有没有办法让这项工作呢？

(function($) {
        $.fn.ellipsis = function()
        {
                return this.each(function()
                {
                        var el = $(this);

                        if(el.css("overflow") == "hidden")
                        {
                                var text = el.html();
                                var multiline = el.hasClass('multiline');
                                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width(multiline ? el.width() : 'auto')
                                        .height(multiline ? 'auto' : el.height())
                                        ;

                                el.after(t);

                                function height() { return t.height() > el.height(); };
                                function width() { return t.width() > el.width(); };

                                var func = multiline ? height : width;

                                while (text.length > 0 && func())
                                {
                                        text = text.substr(0, text.length - 1);
                                        t.html(text + "...");
                                }

                                el.html(t.html());
                                t.remove();
                        }
                });
        };
})(jQuery);

Answer 1

看起来我们可以创建一个新变量来检查maxHeight属性是否存在，但我们需要清理它。

var myHeight = (el.css('maxHeight')) ? el.css('maxHeight').split('px')[0] : el.height();

如果有maxHeight，我们会得到像500px这样的值，我们不需要px，所以我们拆分了字符串并取了数组的第一部分，这是原始整数。

现在我们可以将el.height()替换为myHeight，如果可用，您将获得maxHeight，否则您将获得height属性。

Answer 2

问题似乎是在jQuery的height（）中没有考虑max-height。我通过更改插件接受max_height参数而不是在css中执行max-height来使其工作：

$.fn.ellipsis = function(max_height)

然后改变身高函数：

function height() { return t.height() > max_height; };

不是超级优雅，但它说明了问题。

顺便说一句，上面的原始代码来自：https://stackoverflow.com/a/1022672/986840

jQuery省略号插件不适用于“max-height”

2 个答案: