Ellipsis Plugin

There are many scenarios in the display of online text where shortened, truncated representations are best used. For these scenarios, many opt for the implementation of ellipses. Ellipsis is a customizable jQuery plugin for the smart truncation of text base on container width and not character count.

How to use it

Attach the ellipsis to an element

$(element).ellipsis();

Single line ellipsis require a width to be define.

To ellipsis a paragraph, a class is needed to indicate it is multiline. The default class is multiline, this can be change through the plugin option. Height or max height is required for multiple lines to set line limit.

Plugin options

Name	Type	Default	Description
ellipsis	string	...	ellipsis element with this
multiClass	string	multiline	class to use to determine if element is multiline ellipsis
href	string	none	make the ellipsis into a clickable link
target	string	_self	ellipsis link target '_self' or '_blank'
before	string	none	insert any character before the ellipsis
after	string	none	insert any character after the ellipsis
title	boolean	0	add a title attribute with content to the ellipsis container
wrape	string	none	wrape the ellipsis with the html tag

For the boolean option above use 0 or 1 instead of false or true.

Plugin options taken to the next level

All options above are configurable with HTML5 data attribute. This is a significantly cleaner solution (as long as you don’t mind the inline approach).

You can use the standard approach

$(element1).ellipsis();
$(element2).ellipsis({ellipsis: 'read more', multiClass: 'multi'});
$(element3).ellipsis({title: 1});

or

HTML5 data approach

data-plugin-options='{"ellipsis":"read more","multiClass":"multi"}'
data-plugin-options='{"ellipsis":"read more"}'
$(element).ellipsis(); // init the plugin once

Plugin callback method

This plugin has two callback.

$(element).ellipsis({
  ellipsisStart: function() {
    // do stuff here
  },
  ellipsisComplete: function() {
    // do stuff here
  }
});