Easily Truncate and Show More Text with Elimore JavaScript

Preview:

Description:

Elimore is a lightweight text truncation JavaScript library that truncates long text after a specified number of characters and injects a custom “Show More” button.

When clicked, this button expands the text to show the full content. This is great for condensing long product descriptions, blog post excerpts, or other large text blocks for better UI.

How to use it:

1. Download and import the Elimore JavaScript.

<!-- Browser -->
<script src="dist/jselimore.min.js"></script>

// With build system
import jsElimore from 'jselimore';

2. Initialize the jsElimore and truncate the target text to a specified length (default: 130):

<div class="demo">
  Long Text Block Here
</div>

const element = jsElimore('.demo', {
  maxLength: 150,
});

3. Customize the “Show More” button to match your site’s style and make it enticing to click. Default: “…”.

const element = jsElimore('.demo', {
  maxLength: 150,
  moreText: "Read More..."
});

4. The library is easily integrated with React…

import React, { useEffect } from 'react';
import jsElimore from 'jselimore';

const MyComponent = () => {
  let element; 
  useEffect(() => {
    element = jsElimore('.demo', {
      maxLength: 100,
      moreText: "Read More...",
    });
  }, []);
  // Change options
  const setOptions = (newOptions) => {
    if (element) {
      element.options = { ...element.options, ...newOptions };
    }
  };
  // Rebuild the element
  const rebuildElement = () => {
    if (element) {
      element.rebuild();
    }
  };
  return (
    <button onClick={rebuildElement}>Rebuild Element</button>
  );
}
export default MyComponent;

5. And Vue.js.

<template>
  <div>
    <button @click="rebuildElement">Rebuild Element</button>
  </div>
</template>

import jsElimore from 'jselimore';

export default {
  mounted() {
    this.initializeElement();
  },
  methods: {
    initializeElement() {
      this.element = jsElimore('.demo', {
        maxLength: 100, 
        moreText: "Read More...",
      });
    },
    // Change options
    setOptions(newOptions) {
      if (this.element) {
        this.element.options = { ...this.element.options, ...newOptions };
      }
    },
    // Rebuild the element
    rebuildElement() {
      if (this.element) {
        this.element.rebuild();
      }
    },
  },
};