jquery.autoellipsis An ellipsis plugin for jQuery

Like this? Please share:

jquery.autoellipsis is a jQuery plugin for automatically applying ellipsis on selected elements. This plugin optimally uses the available space, unlike methods like character counting.

Download

The latest version of the jquery.autoellipsis library can be downloaded from here:

License

jquery.autoellipsis is available on GitHub under MIT license.

How to use

Returns: jQuery
.ellipsis( [selector], [options] )
Perform ellipsis on jQuery selection. The optional selector defines the sub-elements which will be affected by the ellipsis operation.
selector The selector selecting the sub-elements to perform ellipsis on. If no selector is given, the plugin defaults to performing ellipsis on all child elements.
options A map of additional options to pass to the method. Supported are:
  • ellipsis The ellipsis character or string to use. Defaults to "..." (three dots).
  • setTitle Sets the title attribute of the affected elements with the original content. May be set to either never, onEllipsis or always. When using onEllipsis, the title attribute will only be set when the content of the element was indeed ellipsed. Defaults to never.
  • live When set to true, perform ellipsis on current and future elements matching the jQuery selection. Also reapplies the ellipsis when the target elements' dimensions change. Use with care, as this mode polls the selection elements. Defaults to false.
The method returns the jQuery object for chaining purposes.

Example

New York Times RSS feed

    The example code below shows how to use the ellipsis plugin. It uses jGFeed to retrieve the Global News RSS feed from the New York Times.

    The feed items are rendered in fixed-height blocks, after which the ellipsis is applied. Using the default .ellipsis() call with no arguments, the ellipsis method works on all sub-elements. 

    (function($) {
    $(document).ready(function() {
        $.jGFeed('http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml',
                function(feeds) {
                    if (feeds) {
                        for (var i = 0, ii = feeds.entries.length; i < ii; i++) {
                            var entry = feeds.entries[i];

                            $('#nyt-feed').append('<li><span class="title">' + entry.title + '</span><span class="description">' + entry.content + '</span></li>');
                        }

                        $('#nyt-feed li').ellipsis();
                    };
                },
                5);

    });
})(jQuery);
    Fork me on GitHub