Long Content Truncation With Show More/Less Links – show-more

show-more is a feature-rich JavaScript library that truncates long contents and replaces the overflowing content with show more and show less links.

Features:

• Truncates text to a specified number of characters.
• Truncates an HTML list to a specified number of list items.
• Truncates an HTML table to a specified number of records (rows).

How to use it:

1. Download and insert the show-more library into the HTML document.

<link rel="stylesheet" href="/dist/css/show-more.min.css" />
<script src="/dist/js/showMore.min.js"></script>

2. Truncate your long text to a number of characters.

<p class="demo-1" data-config="{ 'type': 'text', 'limit': 140, 'more': '&#8594; show more', 'less': '&#8592; less' }">
  Long Text Here
</p>

3. Truncate your long HTML list.

<ul class="demo-2" data-config="{ 'type': 'list', 'limit': 5, 'element': 'li', 'more': '&#8594; show more', 'less': '&#8592; less', "number": true }">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  ...
</ul>

// hide the overflowing list items
.hidden {
  display:none
}

4. Truncate a large HTML table and display the number next to the toggle button.

<table class="demo-3" data-config="{ 'type': 'table', 'limit': 140, 'number': true, 'more': '&#8594; show more', 'less': '&#8592; less' }">
  Large HTML Table Here
</table>

// hide the overflowing table rows
.hidden {
  display:none
}

5. Customize the styles of the show more & show less buttons.

.show-more, .show-less {
  cursor: pointer;
  color: #222;
}

6. Determine the number of content to be displayed after the show more & show less buttons.

<p class="demo-1" data-config="{ 'type': 'text', 'limit': 140, 'after': 50 }">
  Long Text Here
</p>

7. You’re also allowed to initialize the plugin via JavaScript.

new ShowMore('.elementClass', {
    type: 'li',
    more: '↓ show more',
    less: '↑ less',
    number: true,
    ellipsis: false // show only the ellipsis
})

8. All configs.

{
  
  // text, list or table
  type: 'text',

  // number of characters/rows/elements to preserve
  limit: 5,

  // number of hidden items to show more/less
  number: 10,

  // checks how much text is after the trimmed text the limit parameter, if the text is less than the after parameter does not add a more/less button
  after: 50,

  // element to hold the show more/less text
  element: null,

  // adds an ellipsis to shortened text
  ellipsis: true,

  // custom more/less text
  more: 'More',
  less: 'Less',

  // button class
  btnClass: 'show-more-btn',

  // ppportunity to add additional classes to the button
  btnClassAppend: 'cssClass',

  // hide the button
  nobutton: true,

  // customize which HTML elements (with their content) should be removed when truncating text
  removeElements: ['img', 'video'],

}

9. Truncate content using your own regular expression.

new ShowMore('.elementClass', {
  regex: {
    image: {
      match: /<img([wW]+?)[/]?>/g,
      replace: ''
    }
  }
});

10. Callback function.

new ShowMore('.demo-2', {
    onMoreLess: (type, object) => {
      // type = less/more and full object
      console.log(typeAria, object);
    }
})

Changelog:

v2.0.1 (05/21/2025)

• Bugfixes and improvements

v2.0.0 (02/01/2025)

• Refactor code structure for improved readability and maintainability
• Optimize ShowMore class: streamline regex processing, cache getNumber results, and improve button handling logic
• feat: add functionality to remove specified HTML elements and their content
• Introduced removeElements utility function to remove specific HTML tags from a string.
• Updated ShowMore class to utilize removeElements based on user-defined options.
• Added removeElements option to ShowMoreOptions interface with a default list of tags to remove.
• Enhanced HTML processing to clean up empty tags and rows in tables after truncation.
• Updated regex to retain only inline text formatting tags while removing others.

v1.1.9 (06/04/2025)

• update defaultRegex

v1.1.8 (10/16/2022)

• Bugfix

v1.1.6 (09/20/2022)

• Fixed number: true does not work for inline lists (<li>)

v1.1.5 (07/04/2022)

• Fixed Bug with table button

v1.1.4 (05/27/2022)

• remove console.log

v1.1.3 (05/09/2022)

• new props “nobutton” Diable showing the read more/less button

v1.1.2 (01/30/2022)

• Fixed for Firefox

v1.1.1 (01/15/2022)

• separate file compatible with IE

v1.1.0 (11/23/2021)

• drop IE
• add ‘loose’ parameter – smaller library
• new dist folder width iife, umd and esm library, also minimized files

v1.0.20 (09/22/2021)

• Added global configuration

v1.0.19 (09/08/2021)

• update

v1.0.17 (06/12/2021)

• HTML tags (experimentally)

v1.0.16 (05/25/2021)

• fix The error occurs when an object is missing

v1.0.15 (05/25/2021)

• fix Problem with truncated after 1-2 characters

v1.0.14 (05/23/2021)

• add an ellipsis to the text by default

v1.0.13 (05/07/2021)

• Bugfixes

v1.0.12 (05/07/2021)

• fix Issue with Cyrillic characters

v1.0.11 (02/10/2021)

• Usability replacing span on button

v1.0.10 (01/30/2021)

• Added callback function ‘onAction’

v1.0.9 (01/18/2021)

• fix: no less element

v1.0.8 (01/16/2021)

• feat only ellipses with no buttons

v1.0.7 (10/30/2020)

• Update

v1.0.6 (09/29/2020)

• Feat reducing the size of the library
• Refactor small changes scss

v1.0.5 (08/23/2020)

• transferred configuration to JSON in html data-config

v1.0.4 (08/22/2020)

• New parameter showNumber

v1.0.3 (08/06/2020)

• fix ability to disable the (less) option

v1.0.2 (07/12/2020)

• refactoring

v1.0.1 (06/27/2020)

• refactoring

The post Long Content Truncation With Show More/Less Links – show-more appeared first on CSS Script.