Question

I need to be able to use this plugin with the “max-height” css, right now it only works if I define a definite height, but not if it has max-height instead. would there be a way to make that work too?

(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

Looks like we can make a new variable to check for the existence of the maxHeight property, we’ll need to clean it up though.

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

If there is a maxHeight, we’ll get a value like 500px, we don’t want the px, so we’ve split the string and taken the first piece of the array, which is the raw integer.

Now we can just replace el.height() with myHeight and you’ll get the maxHeight if available, otherwise you’ll get the height property.