Cuttr.js examples

Below you'll find some basic demos of cuttr.js library in action applied with different options.



Truncate multi-line string

Before



Sed ut perspiciatis

Cuttr.js is a JavaScript library for generating multi-lined ellipsed text. Indicating the character, word or sentence length, it will truncate the text at the correct position in targeted elements. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

After



Sed ut perspiciatis

Cuttr.js is a JavaScript library for generating multi-lined ellipsed text. Indicating the character, word or sentence length, it will truncate the text at the correct position in targeted elements. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.





Basic JS text truncation (characters)



Cuttr is a vanilla Javascript plugin with which multiple-line texts on a website can be cut. At the end of the text to be truncated, defined characters such as an ellipse are added to indicate that there is more content than currently visible. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



// truncate after 100 characters by default
new Cuttr('.example-basic');


Basic jQuery text truncation (characters)



Cuttr is also a jQuery plugin with which multiple-line content on a website can be cut off. At the end of the text to be truncated, defined characters such as an ellipse are added to indicate that there is more content than currently visible. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



// truncate after 100 characters by default
$('.example-basic-jquery').Cuttr();




Word truncation



With the cuttr.js javascript library, js truncation with words is made simple. At the end of the text to be truncated, defined characters such as these dots are added to indicate that there is more content than currently visible. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



new Cuttr('.example-words', {
  //options here
  truncate: 'words',
  length: 25
});


Sentence truncation



With the cuttr jQuery library, js truncation with words is made simple. Does the HTML break on truncation? No! The markup will be kept and if full content is shown, the original content will be reverted. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



new Cuttr('.example-sentences', {
  //options here
  truncate: 'sentences',
  length: 4
});




Truncate without breaking the HTML


Hover over the shortened text to see the title attribute with full, original text content - useful for tooltip generation.


Truncate multiline content with javascript without breaking the HTML Markup. Here is a link inside the text and the full text content is placed inside target elements title attribute.

image

Dolor sit amet, link 2 consectetuer adipiscing elit. Aenean commodo ligula eget dolor.



new Cuttr('.truncate-keep-html', {
  //options here
  truncate: 'words',
  length: 15,
  title: true,
  readMore: true
});


JS truncation with custom ellipsis and read-more



Sometimes you want to add a custom ellipsis string to the truncated text content. It's also possible to add a read-more button to fold out and fold in the truncated content. This read more button has multiple customization options. All of this can be done pretty easy with the cuttr.js library.



new Cuttr('.example-ellipsis-read-more', {
  //options here
  truncate: 'characters',
  length: 150,
  readMore: true,
  readMoreText: 'Show content',
  readLessText: 'Hide content',
  readMoreBtnPosition: 'after',
  ending: ' ..►'
});




Ready to truncate text the right way?

Explore the cuttr.js docs or buy the license that fits your needs


View Docs Buy license