Javascript Plugin that Truncates Multi-line Text Content | Cuttr.js

Cuttr is a zero dependency, JS / JQUERY library is easy to use that truncates multi-line content (Clampin’s line) to suit within specifications. It adds a removal string such as the cutting tag (…) to indicate that there is a larger text of the currently invisible text.

  • Multiple truncation methods.
  • Text truncated without breaking HTML.
  • Custom cutting chains.
  • Optional “Read more” Anchor to expand original content.

Must Read: Angular Truncate Text To A Specific Numer Of Lines | ngx-line-truncation

How to make use of it:

1. Install and download.

# Yarn
$ yarn add cuttr

# NPM
$ npm i cuttr --save

2. All you have to do is call cuttr.js before the closing </body> tag.

new Cuttr('.element', {
    //options here
    truncate: 'words',
    length: 12
});

3. You can also use cuttr.js as a jQuery plugin if you want!

$(document).ready(function() {
    $('.element').Cuttr({
        //options here
        truncate: 'words',
        length: 12
    });
});

4. Options

let truncateElement = new Cuttr( '.container', {
    // DEFAULTS LISTED

    licenseKey: 'YOUR_KEY_HERE',
    // this option is compulsory 
    // use the license key provided on the purchase of the Cuttr Commercial License
    // if your project is open source and it is compatible with the GPLv3 license you can request a license key
    // please read more about licenses here https://github.com/d-e-v-s-k/cuttr-js#license
    
    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
})

Browser support

The Cuttr javascript/jQuery string truncation plugin targets modern browsers that support ES5, which means Internet Explorer 10 and earlier are not supported, but with IE11 and above, you’re fine.


See Demo And Download

Official Website(d-e-v-s-k): Click Here

This superior jQuery/javascript plugin is developed by d-e-v-s-k. For extra Advanced Usage, please go to the official website.

Share