(cause read-more was already taken 😉)
A customizable, lightweight vanilla JS plugin for truncating content with a Read more / Read less move, whilst preserving the original markup. Able to truncate by max word or character count.
import
and require
npm i read-smore
<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>
import ReadSmore from 'read-smore'
// target all read more 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:
<script src="https://unpkg.com/read-smore@2.0.4/dist/index.umd.js"></script>
Then, initialize
const ReadSmore = window.readSmore
// target all read more elements
const readMoreEls = document.querySelectorAll('.js-read-smore')
// Init
ReadSmore(readMoreEls).init()
ReadSmore()
accepts a single options param, which supports the following properties:
Option | Type | Description | Default |
---|---|---|---|
blockClassName | String | BEM style block name for injected link template | read-smore |
lessText | String | 'Read Less' closer link text (if no data attribute) | Read more |
moreText | String | 'Read More' expander link text (if no data attribute) | Read less |
wordsCount | Number | Default max words (if no data attribute) | 30 |
charsCount | Number | Default max characters (if no data attribute) | null |
isInline | Boolean | Styles link text inline with content | false |
linkElement | String | Change expander element | a |
npm i
npm run build
Builds src
with microbundle
to the various common js patterns.
npm run dev
Dev has microbundle begin watching / building the files, while also running the demo project via Parcel, which imports from the local src directory.
npm run demo:start
npm run lint
import ReadSmore from 'read-smore'
// target all read more elements with `js-read-smore` class
const readMores = document.querySelectorAll('.js-read-smore')
// Init
ReadSmore(readMores).init()
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>
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>
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"
data-read-smore-more-text="Read Schmore"
data-read-smore-less-text="Read Schless"
>
<p>Stuff and words and stuff and words.</p>
<p>Words and stuff and words and stuff.</p>
<!-- more HTML content -->
</div>
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: 'Peep more',
lessText: 'Peep less'
}
// Pass in options param
ReadSmore(readMores, options).init()
You can have the Read More link appear inline with the ellipsed content, as opposed to below it.
Note: As of v2.2.0, required css dep was removed in favor of a pure js approach that simply applied inline styles.
1: Via data-read-smore-inline
<div
class="js-read-smore"
data-read-smore-chars="150"
data-read-smore-inline="true"
>
<p>Stuff and words and stuff and words.</p>
<p>Words and stuff and words and stuff.</p>
<!-- more HTML content -->
</div>
2: Via Option (effects all readSmore instances
const readMores = document.querySelectorAll('.js-read-smore')
const options = {
isInline: true
}
const RMs = ReadSmore(readMores, options)
import
and require