Truncate Text If Exceed Max Character Limit – charCount

Preview:

Description:

A tiny and straightforward text truncation library that automatically trims text based on a specified character limit and displays a Read More button to reveal the hidden content when desired.

How to use it:

1. Download and import the charCount library.

<script src="char-count.min.js"></script>

2. Initialize the characterCounting on the target text block and specify the maximum number of characters. Default: 50.

<div class="contents">
  ...
</div>

document.querySelector('.contents').characterCounting({
  maxChar: 140,
});

3. Customize the text to display in the Read More & Read Less buttons.

document.querySelector('.contents').characterCounting({
  maxChar: 200,
  buttonHideText: "Read Less",
  buttonShowText: "Read More",
});

4. Customize the Read More & Read Less buttons in the CSS.

.content-toggle-btn { 
  padding: 1.25rem; 
  border: 0; 
  border-radius: 3px; 
  background-color: #4F46E5; 
  color: #fff; 
  cursor: pointer; 
}