Smart & Cross-Browser Long Text Truncating Plugin For jQuery - dotdotdot

dotdotdot is a smart and cross-browser jQuery plugin that truncates multiple line content to fit within your container and adds an ellipsis at the end of the text, similar to the CSS3 text-overflow property. The plugin also has the ability to truncate the path names of a URL to make it more readable.

Installation:

# NPM
$ npm install jquery.dotdotdot --save

# Bower
$ bower install jquery.dotdotdot

Basic Usage:

1. Include jQuery javascript library and jQuery dotdotdot plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dotdotdot.min.js"></script>

2. Specify an unique ID to your container.

<div class="box" id="demo">
YOUR MULTI LINE CONTENT HERE.
</div>

3. Call the function and we're done.

$('#demo').dotdotdot();

4. Default plugin settings.

// The HTML to add as ellipsis.
'ellipsis': '... ', 

// How to cut off the text/html: 'word'/'letter'/'children'
'wrap': 'word', 

// Wrap-option fallback to 'letter' for long words
'fallbackToLetter': true, 

'lastCharacter': {
  // Remove these characters from the end of the truncated text.
  remove    : [ ' ', ',', ';', '.', '!', '?' ],

  //  Don't add an ellipsis if this array contains the last character of the truncated text.
  noEllipsis  : []
}, 

// Deviation for the height-option.
'tolerance': 0, 

// Callback function
'callback': null, 

// jQuery-selector for the element to keep and put after the ellipsis.
'after': null, 

// Optionally set a max-height, if null, the height will be measured. 
'height': null, 

// Whether to update the ellipsis: true/'window'.
'watch': false, 

// Window resize fix
'windowResizeFix': true

// Max length
'maxLength': null

Changelog:

v4.0.3 (2019-02-23)

• small fixes

v4.0.2 (2019-02-06)

• small fixes

v4.0.1 (2019-02-03)

• update

v3.2.3 (2018-12-22)

• update

v3.2.2 (2018-02-03)

• truncate fix

v3.2.1 (2018-01-19)

• truncate to node

v3.1 (2017-11-15)

• JS Update

v3.0.5 (2017-10-19)

• fix for hidden nodes
• Fixed an issue where it does not work when unit of height is not 'px'

v3.0.4 (2017-10-13)

• Bugfixed

v3.0.3 (2017-10-01)

• watch improvements

v3.0.2 (2017-09-17)

• small improvement

v3.0.1 (2017-09-16)

• update

v2.0.0 (2017-08-29)

• update

v1.8.3 (2016-07-16)

• update

v1.8.2 (2016-06-24)

• update

v1.8.1 (2016-03-18)

• update

2016-03-03

• Remove is-truncated class when destroying instance

2015-11-20

• fixed responsive div with multiple paragraphs - text vanishes at certain widths

v1.7.4 (2015-07-19)

• function for height option, bugfix

v1.7.2 (2015-05-22)

• small fixes

v1.7.2 (2015-02-03)

• fix read-more link in anchor

v1.7.1 (2015-01-29)

• multiple inserts "after" fix

v1.6.16 (2014-06-27)

• bugfix hidden elements

v1.6.14 (2014-04-07)

• Improved performance

v1.6.13 (2014-03-04)

• bugfix: isTruncated always returned true

v1.6.11 (2014-01-12)

• bugfix html markup

v1.6.10 (2013-12-11)

• Fix for leaving script tags intact

---

This awesome jQuery plugin is developed by FrDH. For more Advanced Usages, please check the demo page or visit the official website.