Fast, intelligent Javascript text truncation
Truncate.js currently depends on jQuery. There are two ways to use Truncate.js:
// Initialize and truncate.
$('#truncate_me').truncate({
lines: 2
});
// Update the HTML and truncate.
$('#truncate_me').truncate('update', 'new html to truncate');
// Undo the truncation.
$('#truncate_me').truncate('expand');
// Redo the truncation (uses cached HTML).
$('#truncate_me').truncate('collapse');
// Update options.
$('#truncate_me').truncate('config', { lines : 3 });
// Initialize and truncate.
var truncated = new Truncate(document.getElementById('#truncate_me'), {
lines: 2
});
// Update the HTML and truncate.
truncated.update('new html to truncate');
// Undo the truncation.
truncated.expand();
// Redo the truncation (uses cached HTML).
truncated.collapse();
// Update options.
truncated.config({ lines : 3 });
// Check if content is truncated. (not supported as a jQuery plugin)
var isTruncated = truncated.isTruncated;
// Check if content is collapsed. (not supported as a jQuery plugin)
var isCollapsed = truncated.isCollapsed
lineHeight
: The text line height (in px). default: "auto"lines
: The number of line maximum. default: 1ellipsis
: Text content to add at the truncation point. default: โฆshowMore
: HTML to insert at the truncation point. Useful for a "Show More" button. default: ""showLess
: HTML to insert when .expand() is called. Useful for a "Show Less" button. default: ""position
: Position of the truncation. Possible values:start
,middle
,end
. default: "end"maxHeight
: Truncate the content to fit in the specified height (in px).
Truncate.js does it's best to intelligently truncate through HTML. However, there are a few cases where it fails, mostly because the text height cannot be easily calculated.
- truncating a node with floating element
- truncating a node with descendant elements that have padding
- truncating a node with text of varying line heights
The truncate position is also very difficult when set to middle
and with nested elements.
See demo/demo.html
for examples of what works and what doesn't.
You need gulp to build the library:
$ npm install
$ npm run build
The output is in the dist folder
It's very simple, hack on the code, ensure the lint and tests pass and submit a pull request. Rinse and repeat.
To install the developer packages you'll need node and npm installed on your machine. Then run:
$ npm install
$ npm run build
Or you can use Gulp directly:
$ npm install --global gulp-cli
$ npm install
$ gulp build
To run the linter:
$ npm run lint
To run the test suite:
$ npm run test
- Mocha - Test runner, we use the
bdd
style. - Chai - Assertion library, we use
assert
style. - Gulp - Builder
Available under the MIT license. See LICENSE file for details.