Cuttr.js | Truncating Long Text by Characters, Words or Sentences with JavaScript

Cuttr.js is a JavaScript text truncation library for truncating text  by characters, words and sentences. You can use this library to hidden some content and show full content by clicking Show more button.

How to truncate text using Cuttr.js?

1.Install cuttr

# Yarn
$ yarn add cuttr
# NPM
$ npm i cuttr --save

2.Import cuttr.min.js in your html file

<script src="./dist/cuttr.min.js"></script>

3.Create a long text to truncate

<p class="example" >Lorem ipsum dolor sit amet, <a href="#">link</a> consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa? Aenean commodo ligula eget dolor! Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

4.Truncate long text by characters

new Cuttr('.truncate-characters', {
    length: 30 // default: 100
});

5.Truncate long text by words

new Cuttr('.truncate-characters', {
    truncate: 'words'
    length: 5 // default: 100
});

6.Truncate long text by sentences.

new Cuttr('.truncate-characters', {
    truncate: 'sentences'
    length: 2 // default: 100
});

7.Set the string will be displayed at the end of your text after truncated. Default: ‘…’.

new Cuttr('.truncate-characters', {
    ending: '......'
});

8.You can set CSS class when truncation finished

new Cuttr('.truncate-characters', {
    loadedClass: 'cuttr--loaded'
});

9.You can set the Read More & Read Less buttons for the long text

new Cuttr('.truncate-characters', {
    readMore: false, 
    readMoreText: 'read more',
    readLessText: 'read less',
    readMoreBtnPosition: 'after',  // or 'inside'
    readMoreBtnTag: 'button',
    readMoreBtnSelectorClass: 'cuttr-readmore', 
    readMoreBtnAdditionalClasses: '',
});