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.
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.
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 |
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
This plugin has two callback.
$(element).ellipsis({
ellipsisStart: function() {
// do stuff here
},
ellipsisComplete: function() {
// do stuff here
}
});