Truncate Text If Exceed Max Character Limit – charCount

Category: Javascript , Text | March 28, 2023
Views Total:145 views
Official Page:Go to website
Last Update:March 28, 2023


Truncate Text If Exceed Max Character Limit – charCount


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">
  maxChar: 140,

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

  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; 

You Might Be Interested In:

Leave a Reply