Cuttr.js
Cuttr is a zero dependency, easy to use JS / jQuery library that truncates multiple line text content (Line Clampin’) to fit within given specifications. It adds an ending string like a ellipsis (...) to indicate that there is more text available than currently visible.
- Multiple truncation methods
- Truncate text without breaking the HTML
- Custom ellipsis strings
- Optional "Read more" anchor to expand original content
Demos online | Codepen Example
Install
Download
- cuttr.min.js minified, or
- cuttr.js un-minified
CDN
Link directly to Cuttr files on unpkg.
<!-- or -->
Link directly to Cuttr files on cdnjs.
<!-- or -->
Package managers
npm
npm install cuttr --save
yarn
yarn add cuttr
bower
bower install d-e-v-s-k/cuttr-js --save
License
Commercial license
If you want to use Cuttr to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. [Purchase a Cuttr Commercial License]
Open source license
If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Cuttr under the terms of the GPLv3.
Read more about Cuttr's licenses.
Usage
As you can see in the example files, you will need to include:
- The JavaScript file
cuttr.js
(or its minified versioncuttr.min.js
)
Including files:
Or as a module
import Cuttr from 'Cuttr';
Initialization
Initialization with Vanilla Javascript
All you need to do is call cuttr.js before the closing </body>
tag.
'.element' //options here truncate: 'words' length: 12;
Initialization with jQuery
You can use cuttr.js also as a jQuery plugin if you want to!
;
Options
var truncateText = '.container' // DEFAULTS LISTED truncate: 'characters' // Truncate method // How to truncate the text // ['characters'|'words'|'sentences'] length: 100 // Truncation limit // After how much [characters|words|sentences] should the text be truncated // note: character truncation also counts html characters ending: '...' // Truncation ending string loadedClass: 'cuttr--loaded' // Class to set on truncated element when truncation finished title: false // add original, full content to elements title attribute // [true|false] readMore: false // enables / disables the "read more" button // [true|false] readMoreText: 'Read more' // text to show as "Read more" button to show full content readLessText: 'Read less' // text to show as "Read less" button to show truncated content readMoreBtnPosition: 'after' // "Read more" button position // ['after'|'inside'] // 'after' = button will be appended after the truncated element // 'inside' = button will be appended inside the truncated element, at the end of the truncated content readMoreBtnTag: 'button' // "Read-more" button HTML tag // ['button'|'a'|...] readMoreBtnSelectorClass: 'cuttr__readmore' // "Read-more" button class selector readMoreBtnAdditionalClasses: '' // "Read-more" button additional classes to be added
Demos & Examples
Checkout our demos & examples page
Browser support
The Cuttr javascript / jQuery string truncation plugin targets modern browsers that support ES5, meaning Internet Explorer 10 and earlier are not supported, but with IE11 and above you are fine.
Created and maintained by DEVSK.