JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<div class="dummy">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, vel fuga rerum asperiores quos qui exercitationem et expedita libero corrupti. Placeat tempore aspernatur sapiente non consectetur labore corporis ipsum iste.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, vel fuga rerum asperiores quos qui exercitationem et expedita libero corrupti. Placeat tempore aspernatur sapiente non consectetur labore corporis ipsum iste.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, vel fuga rerum asperiores quos qui exercitationem et expedita libero corrupti. Placeat tempore aspernatur sapiente non consectetur labore corporis ipsum iste.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, vel fuga rerum asperiores quos qui exercitationem et expedita libero corrupti. Placeat tempore aspernatur sapiente non consectetur labore corporis ipsum iste.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, vel fuga rerum asperiores quos qui exercitationem et expedita libero corrupti. Placeat tempore aspernatur sapiente non consectetur labore corporis ipsum iste.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, vel fuga rerum asperiores quos qui exercitationem et expedita libero corrupti. Placeat tempore aspernatur sapiente non consectetur labore corporis ipsum iste.
  </p>
</div>
<div class="dummy">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem obcaecati at praesentium sunt voluptatum dolorum. Consequatur, fugiat optio itaque nihil quibusdam repellendus mollitia assumenda placeat debitis reiciendis vel perspiciatis!
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, autem, eos, fugit, id commodi vel aliquam dolorum placeat magnam repudiandae ratione quidem omnis at earum dolores consequuntur molestias! Veritatis, ipsam!
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, quam tempora...

JavaScript

/**
* @app ReadMoreJS
* @desc Breaks the content of an element to the specified number of words
* @version 1.1.0
* @license The MIT License (MIT)
* @author George Raptis | http://georap.gr 
*/
(function (win, doc, undef) {
	'use strict';
	
	/**
	 * @desc this object holds all functions
	*/
	var RM = {};

	/* ============================== */
	/*             HELPERS            */
	/* ============================== */
	RM.helpers = {
		extendObj: function() {
			for (var i = 1, l = arguments.length; i < l; i++) {
				for (var key in arguments[i]) {
		            if (arguments[i].hasOwnProperty(key)) {
		                if (arguments[i][key] && arguments[i][key].constructor && arguments[i][key].constructor === Object) {
		                	arguments[0][key] = arguments[0][key] || {};
		                	this.extendObj(arguments[0][key], arguments[i][key]);
		                } else {
		                	arguments[0][key] = arguments[i][key];
		                }
		            }
			    }
			}
			return arguments[0];
		}
	};

	/* ============================== */
	/*         MAIN FUNCTIONS         */
	/* ============================== */

	// Return the number of words of string.
	RM.countWords = function (str) {
  		return str.split(/\s+/).length;
	};

	// Rturn string starting from first word untill number specified.
	RM.generateTrimmed = function (str, wordsNum) {
		return str.split(/\s+/).slice(0, wordsNum).join(' ') + '...';
	};

	// Plugin Initialization
	RM.init = function (options) {
		var defaults = {
			target: '',
			numOfWords: 50,
			toggle: true,
			moreLink: 'read more...',
			lessLink: 'read less',
			linkClass: 'rm-link', 
			containerClass: false 
		};
		options = RM.helpers.extendObj({}, defaults, options);

		var target = doc.querySelectorAll(options.target),                                                // Get the node list of target elements specified by the user.
			targetLen = target.length,                                                          ...