Read Smore

A vanilla JS content truncation plugin / module

Repo | Examples

About

About Section

ReadSmore.js is a customizable, lightweight and dependency-free JS library for truncating content with a Read more / Read less link, whilst preserving original markup. The plugin supports truncation by max word or character count, defined via data attribute or options.

Read Smore is authored by Stephen Scaff. View it on Github and NPM

Just like the example you're checking out right here. You can checkout more examples here.

Features

Features Section
  • Super duper lightweight, no dependencies, vanilla js.
  • Supports truncating content by max Word or Character count.
  • Adds ellipse after truncated content.
  • Preserves existing markup (nice).
  • Read more / Read less text is customizable.
  • Use data attributes to control max words/characters count
  • Block level class name is customizable
  • Read More text can be block level or inline via provided css
  • Hybrid NPM Module supporting import and require

Install

Install Section 
npm i read-smore

Usage: Setup

Usage and Setup Section

Init ReadSmore()

import ReadSmore from 'read-smore'

// target all read smore elements
const readMores = document.querySelectorAll('.js-read-smore')

// init
ReadSmore(readMores).init()

Or by require

const ReadSmore = require('read-smore')
const readMores = document.querySelectorAll('.js-read-smore')
ReadSmore(readMores).init()

Or by CDN

To include via CDN, find the latest UMD version at https://unpkg.com/read-smore and inlcude via script tag, like so:

// index.html
<script src="https://unpkg.com/read-smore@2.0.4/dist/index.umd.js">
                

// Init JS
const ReadSmore = window.readSmore

// target all read more elements
const readMoreEls = document.querySelectorAll('.js-read-smore')

// Init
ReadSmore(readMoreEls).init()

Usage: Markup

Usage - Markup Section

Example by max word count (via data-read-smore-words)

To truncate content by max word count, use the data attribute data-read-smore-words="" with desired value.

<div 
  class="js-read-smore" 
  data-read-smore-words="70" 
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

Example by max character count (via data-read-smore-chars)

To truncate content by max character count, use the data attribute
data-read-smore-chars="" with desired value. 

<div 
  class="js-read-smore" 
  data-read-smore-chars="150" 
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

Example setting more/less text via data attributes

To set custom more/less text, use the data attributes
data-read-smore-more-text | data-read-smore-less-text with desired value.

This overrides the values set via option.moreText | option.lessText for that instance.

<div 
class="js-read-smore" 
data-read-smore-chars="150" 
data-read-smore-more-text="Learn Schmore"
data-read-smore-less-text="Learn Schless"
>
<p>Stuff and words and stuff and words.</p>
<p>Words and stuff and words and stuff.</p>
<!-- more HTML content -->
</div>

Inline Read more

By default the Read more text sits below the content block. However, you can make it inlined with the ellipsed text


1. Provide the the data-attribute data-read-smore-inline="true"

<div 
  class="js-read-smore" 
  data-read-smore-words="70" 
  data-read-smore-inline="true">
</div>

2. Or pass as option (effects all readSmore instances) 

const readMores = document.querySelectorAll('.js-read-smore')

const options = {
  isInline: true
}

const RMs = ReadSmore(readMores, options)

Options

Options S
Option Type Description Default
blockClassName String Sets Block level/parent class name read-smore
moreText String Sets "Read more" text (if no data attribute) Read more
lessText String Sets "Read less" text (if no data attribute) Read less
wordsCount Number Sets max word count. Read Smore defaults to by word if nothing is defined 70
charsCount Number Sets max character count. null
isInline Boolean Sets Read more link as inline with content false

Passing Options

ReadSmore supports a few options, such as editing the more/less text. See Options table below for more.

import ReadSmore from 'read-smore'

const readMores = document.querySelectorAll('.js-read-smore')

const options = {
  blockClassName: 'read-more',
  moreText: 'Custom more text',
  lessText: 'Custom less text'
}

ReadSmore(readMores, options).init()

Examples

Examples Section
30 words

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

It is for these reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

70 words

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

It is for thesegit reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

100 chars

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

It is for these reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

100 chars, data attribute more/less text

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

It is for these reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

120 chars inline

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

It is for these reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

400 chars mixed html

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

  • That goal will serve to organize and measure
  • The best of our energies and skill
  • That challenge is one that we are willing to accept
  • One we are unwilling to postpone
  • One which we intend to win
  • And the others, too

It is for these reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

30 words

We choose to go to the moon

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard.

Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.

It is for these reasons that I regard the decision last year to shift our efforts in space from low to high gear as among the most important decisions that will be made during my incumbency in the office of the Presidency.

In the last 24 hours we have seen facilities now being created for the greatest and most complex exploration in man's history.

400 chars

We choose to go to the moon

Less than the defined 400 chars available, so let's do nothing.

40 words

Less than the defined 40 words available, so do nadda.

We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy.