Truncate Text To Any Length – truncate-element.js

Preview:

Description:

Are you tired of working with long text strings? Keeping in mind how important it is for us to be able to communicate clearly, especially when we write on the web, one problem that many front-end developers have to deal with is strings that are longer than expected (the most common scenario is of course texts translated in more than one language).

truncate-element.js is a lightweight web component that allows you to easily truncate your content to any number of characters. It automatically adds a read more link at the end of the text so that users can reveal the remaining text with a single click.

Works with any frameworks like Vanilla JavaScript, Angular, React, and Vue.js.

How to use it:

1. Download the package and import the truncate-element.js.

<script src="truncate-element.js"></script>

2. Wrap your text into the <truncate-element /> and specify the number of characters to keep.

<truncate-element config='{"number":30}'>
  Long Content Here
</truncate-element>

3. More configurations.

{
  // read more text
  more: "",
  // read less text
  less: "",
  // preventing truncating on incomplete words
  completeWord: false,
  // whether to find hashtag in the text
  hashtag: false,
  // see the text as it is
  hasLiteral: false,
  // colorize words in this list
  highlightList: [{ name: '', color: '' }],
  highlightCondition: 'exactly',
  
}

4. See README.md in the zip to learn how to implement the component in Angular, React, or Vue frameworks.

Changelog:

12/19/2022

• v2.4.0: Bugfix