jQuery 省略号插件不适用于“最大高度”答案

【问题标题】：jQuery ellipsis plugin won't work with "max-height"jQuery 省略号插件不适用于“最大高度”
【发布时间】：2012-10-17 05:44:37
【问题描述】：

我需要能够将这个插件与“max-height”css 一起使用，现在它只有在我定义了一个确定的高度时才有效，但如果它有 max-height 则不行。有没有办法让它也起作用？

(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);

【问题讨论】：

标签： jquery plugins ellipsis css

【解决方案1】：

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

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

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

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

【讨论】：

好的，非常感谢，但我想把它放在这个插件的什么地方？
你的意思是我提供的代码去哪里了，或者整个插件去哪里了？
我提供的代码将在var el = $(this);之后。您唯一需要做的另一件事是找到el.height() 的任何实例并将其更改为myHeight——我在代码中提供的el.height() 除外。
好的，我已经全部改了，问题是点没有显示（只有在使用“最大高度”时，它们在“高度”时显示正常），所以我不知道为什么 3 个点没有按照应有的方式放置在那里。

【解决方案2】：

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

$.fn.ellipsis = function(max_height)

然后改变高度函数：

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

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

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

【讨论】：