Truncated.js

Truncated.js is a javascript plugin that shortens a text string based on a specified max-height & adds an ellipsis at the end.

Setup

npm install truncated.js --save-dev

bower install truncated.js --save-dev

Run

1. Include truncated.js into your vendor file or in a <script> tag.
2. Add truncated css/scss to your css.
3. truncate the element you'd like to give truncation to.

truncated('selector', maxHeight);🔥

Basic Examples

Basic

truncated('selector', maxHeight);

Or Multiples

truncated('selector', maxHeight);

But not this one

truncated('selector:not([not this selector])', maxHeight);

How?

Truncated.js trims a text string to a last full word of what can fit within a specified max height.

Why?

Truncated.js is made simpicity when it comes to text truncation. Several plugins that I've looked at oversolve what people want when they want text truncation - for text to look nice in a specified space. Here's a basic example & with jQuery.

This plugin is small - ~1.5kb unminified & is meant to do 1 thing - truncate text based on a specified max height.

Options

If you'd like to not use the classname 'js-truncated', just use your own.

reframe('selector', 'classname');

jQuery

You can use truncated with jQuery.

$('selector').reframe(maxheight);

&, if you'd like to use a custom classname instead of 'js-truncated'

$('selector').reframe(maxheight, 'classname');