$3

- cuttr.min.js minified, or
- cuttr.js un-minified

$3

Link directly to Cuttr files on unpkg.

`` html




`

Link directly to Cuttr files on cdnjs.

` html




`

$3

`sh
npm install cuttr -D
`

yarn

`sh
yarn add cuttr -D
`

bower

`sh
bower install d-e-v-s-k/cuttr-js --save
`


License

$3

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]](https://cuttr.kulahs.de)

$3

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.

The credit comments in the JavaScript files should be kept intact (even after combination or minification).

Read more about Cuttr's licenses.

Usage

#### Initialization with Vanilla Javascript
All you need to do is call cuttr.js before the closing tag.

`javascript
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!

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

$3

`javascript
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
})
`

$3

`javascript
let truncateElement = new Cuttr('.element', {
//options here
truncate: 'words',
length: 12
});
`

After the plugin is fired, a series of methods are available.

#### expandContent()
Expands the given instance content.

`javascript
truncateElement.expandContent();
`

#### truncateContent()
Truncates the given instance content.

`javascript
truncateElement.truncateContent();
`

#### destroy()
Completely restores the Element to its pre-init state.

`javascript
truncateElement.destroy();
`

#### Method usage with jQuery
In order to access the public methods via jQuery, you need to do it through jQuery's .data() function.

Example:

`javascript
$(document).ready(function() {

// Cuttr initialization
let truncateElement = $('.element').Cuttr({
//options here
truncate: 'words',
length: 12
});

// access html element's prototype via jQuery's .data()
let truncData = truncateElement.data('Cuttr');
// call Cuttr method
truncData.expandContent();

});
`

$3

`javascript
let truncateElement = new Cuttr('.element', {
//options here
truncate: 'words',
length: 12,

// callbacks
afterTruncate: function(){
let truncateElement = this;
console.log(this);
alert('"afterTruncate" callback fired!');
}
});
`

#### afterExpand()
Callback fired once the original content has been expanded.

`javascript
let truncateElement = new Cuttr('.element', {
//options here
truncate: 'words',
length: 12,

// callbacks
afterExpand: function(){
let truncateElement = this;
console.log(this);
alert('"afterExpand" callback fired!');
}
});
`

Demos & Examples

Checkout our demos & examples page

More examples on Codepen:
* vanilla Javascript example
* Vue.js example
* jQuery example

Development

Browser support

---

Created and maintained by DEVSK.