Multiline Text Truncator In Vanilla JavaScript – Cuttr.js

Category: Javascript , Text | November 11, 2020
Author: d-e-v-s-k
Views Total: 96 views
Official Page: Go to website
Last Update: November 11, 2020
License: MIT


Multiline Text Truncator In Vanilla JavaScript – Cuttr.js


Cuttr.js is a vanilla JavaScript text truncation library to truncate text to any number of characters, words, or even sentences.

With optional Read More/Read Less buttons, your visitors can reveal and hide overflowing text with just one click.

How to use it:

1. Install and download.

# Yarn
$ yarn add cuttr

$ npm i cuttr --save

2. Include the minified version of the Cuttr.js library on the web page.

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

3. Truncate your long text to a specific number of characters.

<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>
new Cuttr('.truncate-characters', {
    length: 30 // default: 100

4. Truncate your long text to a specific number of words.

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

5. Truncate your long text to a specific number of sentences.

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

6. Customize the string displayed at the end of your text after truncated. Default: ‘…’.

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

7. Determine the CSS class to set when truncation finished.

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

8. Customize the Read More & Read Less buttons.

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

9. Determine whether to add original content to element’s title tag.

new Cuttr('.truncate-characters', {
    title: true


v1.1.3 (11/11/2020)

  • add title-attr option

v1.1.2 (09/23/2020)

  • update

You Might Be Interested In:

Leave a Reply