Smart & Cross-Browser Long Text Truncating Plugin For jQuery - dotdotdot
File Size: | 46.2 KB |
---|---|
Views Total: | 11611 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.