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.

<script src="https://unpkg.com/cuttr@1/dist/cuttr.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/cuttr@1/dist/cuttr.js"></script>
 

Link directly to Cuttr files on cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/cuttr/1.2.0/cuttr.min.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cuttr/1.2.0/cuttr.js"></script>
 

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 version cuttr.min.js)

Including files:

<script type="text/javascript" src="cuttr.js"></script>

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.

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

Initialization with jQuery

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

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

Options

var truncateText = new Cuttr( '.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.