Jquery-read-more NPM

jQuery Read More

A lightweight jQuery plugin for creating animated Read more text.

Installation

You can install the file with NPM:

npm install jquery-read-more

Or import the file directly from a <script> tag:

<script src="lib/jquery-read-more.min.js">

You can find the minified file in the git repository.

Attention! The plugin needs jQuery in order to work.

Initialisation

If you use a module syntax, you can import the plugin with

import 'jquery-read-more';

If you import the file, the plugin will be loaded when the DOM is ready.

Usage

Using the plugin is simple, let's show a minimal example:

<div id="text-container" data-controller="#readMore">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio,
        dolorum provident rerum aut hic quasi placeat iure tempora laudantium
        ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.
    </p>
    <div id="readMore">Read More</div>
</div>

Note the data-controller attribute that points to the read more div. Then activate the plugin from JS:

$("#text-container").readMore({lines: 2});

This will clip the text after two lines, adding the ellipsis if the text is truncated. If the text is shorter than 2 lines, the read more div will be hidden and no ellipsis is shown.

It is possible to apply .readMore({lines: x}) also to multiple elements at once.

Interactive Example

An interactive example is available here

Options

The complete list of options accepted as input:

Name	Required	Default Value	Description
lines	required	none	The number of lines to show before cutting the text. Is the only mandatory input.
readMoreLabel	optional	"Read more"	Label for the read more / expand link
readLessLabel	optional	"Read less"	Label for the read less / collapse link
ellipsis	optional	"..."	Label for the text to add at the end in case of text clamping
splitOn	optional	" "	String or regex, define a custom splitting character