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
Link directly to Cuttr files on unpkg.
<!-- or -->
Link directly to Cuttr files on cdnjs.
<!-- or -->
npm install cuttr --save
yarn add cuttr
bower install d-e-v-s-k/cuttr-js --save
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.
As you can see in the example files, you will need to include:
cuttr.js(or its minified version
Or as a module
import Cuttr from 'Cuttr';
All you need to do is call cuttr.js before the closing
'.element'//options heretruncate: 'words'length: 12;
Initialization with jQuery
You can use cuttr.js also as a jQuery plugin if you want to!
var truncateText = '.container'// DEFAULTS LISTEDtruncate: '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 charactersending: '...'// Truncation ending stringloadedClass: 'cuttr--loaded'// Class to set on truncated element when truncation finishedtitle: 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 contentreadLessText: 'Read less'// text to show as "Read less" button to show truncated contentreadMoreBtnPosition: '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 contentreadMoreBtnTag: 'button'// "Read-more" button HTML tag// ['button'|'a'|...]readMoreBtnSelectorClass: 'cuttr__readmore'// "Read-more" button class selectorreadMoreBtnAdditionalClasses: ''// "Read-more" button additional classes to be added
Demos & Examples
Created and maintained by DEVSK.